Как я могу получить несколько файлов для загрузки на сервер со страницы Javascript без пропуска?

Question

Как я могу получить несколько файлов для загрузки на сервер со страницы Javascript без пропуска?

Я работаю над исследовательским экспериментом, который использует getUserMedia, реализованный в recorder.js, для записи файлов .wav с микрофона пользователя и XMLHttpRequest для их загрузки на сервер. Каждый файл длится около 3 секунд, всего 36 файлов. Файлы записываются один за другим и отправляются на сервер сразу после их записи.

Проблема, с которой я сталкиваюсь, заключается в том, что не все файлы попадают на сервер. Видимо скрипт или php скрипт не в состоянии отследить все запросы подряд. Как я могу убедиться, что я получаю все файлы? Это важные данные исследований, поэтому мне нужна каждая запись.

Вот код, который отправляет файлы на сервер. Аудиоданные — это блоб:

var filename = subjectID + item__number;
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
var fd=new FormData();
fd.append("audio_data",blob, filename);
xhr.open("POST","upload_wav.php",true);
xhr.send(fd);

И это PHP-файл на стороне сервера:

print_r($_FILES);
$input = $_FILES['audio_data']['tmp_name'];
$output = "audio/".$_FILES['audio_data']['name'].".wav";
move_uploaded_file($input, $output)

Этот способ действий в основном скопирован с этого сайта:
Использование Recorder.js для захвата аудио WAV в HTML5 и загрузки его на ваш сервер или загрузки локально

Я уже пытался заставить XMLHttpRequest ждать с помощью

   while (xhr.readyState != 4)
{
console.log("Waiting for server...")
}

Это просто привело к зависанию страницы.

Было бы лучше использовать ajax, чем запрос XMLHttp? Что я могу сделать, чтобы убедиться, что все файлы загружены? Я довольно новичок в Javascript, поэтому примеры кода приветствуются.

0

getusermedia javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я понятия не имею, как выглядит ваша архитектура, но вот потенциальное решение, которое поможет решить вашу проблему.

Решение использует API Web Worker отключить загрузку файла в подпроцесс. Это сделано с Рабочий интерфейс этого API. Этот подход будет работать, потому что нет единого потока основного процесса — веб-работники работают в своих собственных процессах.

Используя этот подход, мы делаем три основных вещи:

создать нового работника, передающего скрипт для выполнения
передавать сообщения работнику, чтобы работник имел дело с
передавать сообщения обратно в основной процесс для обновления статуса / ответов / преобразования разрешенных данных / и т. д.

Код сильно комментируется ниже, чтобы помочь вам понять, что происходит и где.

Это основной файл JavaScript (script.js)

// Create a sub process to handle the file uploads
///// STEP 1: create a worker and execute the worker.js file immediately
let worker = new Worker('worker.js');
// Ficticious upload count for demonstration
let uploadCount = 12;
// repeatedly build and send files every 700ms
// This is repeated until uplaodCount == 0
let builder = setInterval(buildDetails, 700);

// Recieve message from the sub-process and pipe them to the view
///// STEP 2: listen for messages from the worker and do something with them
worker.onmessage = e => {
let p = document.createElement('pre');
// e.data represents the message data sent from the sub-process
p.innerText = e.data;
document.body.appendChild(p);
};

/**
* Sort of a mock to build up your BLOB (fake here of-course)
*
* Post the data needed for the FormData() to the worker to handle.
*/
function buildDetails() {
let filename = 'subject1234';
let blob = new Blob(['1234']);
///// STEP 3: Send a message to the worker with file details
worker.postMessage({
name: "audio_data",
blob: blob,
filename: filename
});
// Decrease the count
uploadCount--;
// if count is zero (== false) stop the fake process
if (!uploadCount) clearInterval(builder);
}

Это файл JavaScript подпроцесса (worker.js)

// IGNORE the 'fetch_mock.js' import that is only here to avoid having to stand up a server
// FormDataPolyFill.js is needed in browsers that don't yet support FormData() in workers
importScripts('FormDataPolyFill.js', 'fetch_mock.js');
// RXJS provides a full suite of asynchronous capabilities based around Reactive Programming (nothing to do with ReactJS);
// The need for your use case is that there are guarantees that the stream of inputs will all be processed
importScripts('https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.js');

// We create a "Subject" that acts as a vessel for our files to upload
let forms = new rxjs.Subject();
// This says "every time the forms Subject is updated, run the postfile function and send the next item from the stream"forms.subscribe(postFile);

// Listen for messages from the main process and run doIt each time a message is recieved
onmessage = doIt;

/**
* Takes an event object containing the message
*
* The message is presumably the file details
*/
function doIt(e) {
var fd = new FormData();
// e.data represents our details object with three properties
fd.append(e.data.name, e.data.blob, e.data.filename);
// Now, place this FormData object into our stream of them so it can be processed
forms.next(fd);
}
// Instead of using XHR, this uses the newer fetch() API based upon Promises
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
function postFile(fd) {
// Post the file to the server (This is blocked in fetch_mock.js and doesn't go anywhere)
fetch('fake', {
method: 'post',
body: fd,
})
.then((fd) => {
// After the XHR request is complete, 'Then' post a message back to the main thread (If there is a need);
postMessage("sent: " + JSON.stringify(fd));
});
}

Так как это не будет работать в stackoverflow, я создал плункер, чтобы вы могли запустить этот пример:
http://plnkr.co/edit/kFY6gcYq627PZOATXOnk

Если все это кажется сложным, вы представили сложную проблему, которую нужно решить. 🙂

Надеюсь это поможет.

0