gpt4 book ai didi

javascript - 无法在 'postMessage'上执行 'Worker':无法克隆FormData对象

转载 作者:行者123 更新时间:2023-12-01 17:25:58 25 4
gpt4 key购买 nike

我正在使用Web Worker通过使用slice创建块来上传较大的文件,但是当我以formData对象的形式发送文件时,它会抛出此错误。当我在reactjs中这样做时,它会抛出以下错误

react-dom.development.js:518警告:React无法识别DOM元素上的offClick属性。如果您有意让它作为自定义属性出现在DOM中,请将其拼写为小写offclick。如果您不小心从父组件传递了它,请将其从DOM元素中删除。

这是我的代码,我在其中使用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>

最佳答案

您没有正确使用worker 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)

关于javascript - 无法在 'postMessage'上执行 'Worker':无法克隆FormData对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52664725/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com