无法在“ Worker”上执行“ postMessage”：无法克隆FormData对象
[英]Failed to execute 'postMessage' on 'Worker': FormData object could not be cloned
问题描述
I am using web workers for uploading larger file by creating chunks using slice but when I am sending the file in the form of formData object, it is throwing this error.when I do this in reactjs it is throwing following error 
我正在使用Web Worker通过使用slice创建块来上传较大的文件，但是当我以formData对象的形式发送文件时，它会抛出此错误。当我在reactjs中这样做时，它会抛出以下错误
react-dom.development.js:518 Warning: React does not recognize the offClick prop on a DOM element. react-dom.development.js：518警告：React无法识别DOM元素上的offClick道具。 If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase offclick instead. 如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写offclick 。 If you accidentally passed it from a parent component, remove it from the DOM element. 如果您不小心从父组件传递了它，请将其从DOM元素中删除。
here is my code, where I am passing formData object to worker using postMessage, please help me to resolve this 这是我的代码，我在其中使用postMessage将formData对象传递给工作人员，请帮助我解决此问题
<!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 个解决方案
解决方案1
0 2018-10-05 12:12:42
You do not use the worker API properly. 您没有正确使用工作程序API。 You should have a look to this https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers 您应该看看这个https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
your worker file should looks like: 您的工作程序文件应如下所示：
self.onmessage = function(e) { // Do all the work here the postMessage the result self.postMessage(result) }
You "main" file is good :) 您的“主”文件是好的:)
const worker = new Worker('yourWorkerFilePath') worker.onmessage() = function(resultFormWorker) { // treate the result here } worker.postMessage(file)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.