javascript - 无法在“Worker”上执行“postMessage”:无法克隆 FormData 对象
问题描述
我正在使用网络工作者通过使用切片创建块来上传更大的文件,但是当我以 formData 对象的形式发送文件时,它会抛出这个错误。当我在 reactjs 中这样做时,它会抛出以下错误
react-dom.development.js:518 警告:React 无法识别offClick
DOM 元素上的道具。如果您有意希望它作为自定义属性出现在 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>
解决方案
您没有正确使用工作人员 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)
推荐阅读
- azure - Azure 和私有非基于 Azure 的端点
- javascript - 将数据从输入传输到另一个输入
- ios - 我正在继承 AlertController 并收到错误“UIAlertController must have a title, a message or an action to display”
- html - 访问[formControl]下一个标签 - 错误:找不到具有未指定名称属性的控件
- typescript - 如何将 DraftJs 编辑器输入限制为单行?
- netlogo - NetLogo - 在 2 个正方形内找到海龟
- angular - 渲染宿主元素时调用指令
- r - R vegan 包错误说数据不能包含 NA,但数据帧不包含 NA
- python - Python中的阶乘多线程
- c# - 按具有分页的公共属性对对象的动态列表进行排序