Не удалось выполнить «postMessage» для «Worker»: объект FormData не может быть клонирован - PullRequest
Новая
       22

Не удалось выполнить «postMessage» для «Worker»: объект FormData не может быть клонирован

0 голосов
/ 05 октября 2018

Я использую веб-работников для загрузки файла большего размера путем создания кусков с использованием слайса, но когда я отправляю файл в виде объекта formData, он выдает эту ошибку. Когда я делаю это в реакции, он выдает следующую ошибку

react-dom.development.js: 518 Предупреждение: React не распознает реквизит offClick элемента DOM.Если вы намеренно хотите, чтобы он отображался в DOM в качестве пользовательского атрибута, вместо этого пишите его строчными буквами offclick.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

Вот мой код, где я передаю объект formData работнику, используя postMessage, пожалуйста, помогите мне разрешить это 

<!DOCTYPE html>
<html>
<head>
    <title>Using FileReaderSync Example</title>
    <script id="worker1" type="javascript/worker">
             var file = [], p = true;
function upload(blobOrFile) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'url', true);//add url to upload
    xhr.onload = function(e) {
    };
    xhr.send(blobOrFile);
}

function process() {
    for (var j = 0; j <file.length; j++) {
        var blob = file[j];

        const BYTES_PER_CHUNK = 1024 * 1024;
        // 1MB chunk sizes.
        const SIZE = blob.size;

        var start = 0;
        var end = BYTES_PER_CHUNK;

        while (start < SIZE) {

            if ('mozSlice' in blob) {
                var chunk = blob.mozSlice(start, end);
            } else {
                var chunk = blob.slice(start, end);
            }

            upload(chunk);

            start = end;
            end = start + BYTES_PER_CHUNK;
        }
        p = ( j = file.length - 1) ? true : false;
        self.postMessage(blob.name + " Uploaded Succesfully");
    }
}
self.addEventListener('message', function(e) {
    for (var j = 0; j < e.data.files.length; j++)
        file.push(e.data.files[j]);
    if (p) {
        process()
    }
})
    </script> 
     <script>

       var blob = new Blob([document.querySelector('#worker1').textContent]);
        var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e) {
    alert(e.data);
};
worker.onerror =werror;
function werror(e) {
    console.log('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);
}
function handleFileSelect(evt) {
    console.log("coming");
    evt.stopPropagation();
    evt.preventDefault();
     let files = new FormData();
        files.append('file', event.target.files );

    //var files = evt.target.files;
    // FileList object.
    worker.postMessage({
        'files' : files
    });
    //Sending File list to worker
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy';
    // Explicitly show this is a copy.
}
function getd(){
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
window.addEventListener("load", getd, false);
    </script>
</head>
<body>
        <input type="file" id="files" name="files[]"/>
        <output id="list"></output>
</body>
</html>

1 Ответ

0 голосов
/ 05 октября 2018

Вы не используете рабочий API должным образом.Вы должны взглянуть на это https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

ваш рабочий файл должен выглядеть так: 

self.onmessage = function(e) {

  // Do all the work here the postMessage the result
  self.postMessage(result)
}

Ваш "основной" файл хорош:) 

const worker = new Worker('yourWorkerFilePath')

worker.onmessage() = function(resultFormWorker) {
  // treate the result here
}

worker.postMessage(file)
...