这是一篇很长的文章，但我厌倦了所有这些对我不起作用的示例，因为它们使用了 Promise 对象或this在使用 Reactjs 时具有不同含义的错误。我的实现是使用带有 reactjs 的 DropZone，并且我使用类似于以下站点上发布的框架获取字节，但上面的其他内容都不起作用：https : //www.mokuji.me/article/drop-upload-教程-1。对我来说，有 2 个键：
- 您必须使用 FileReader 的 onload 函数并在其期间从事件对象中获取字节。
我尝试了各种组合，但最终，有效的是：
const bytes = e.target.result.split('base64,')[1];
活动在哪里e。React 需要const，您可以var在纯 Javascript 中使用。但这给了我 base64 编码的字节字符串。
因此，我将像使用 React 一样包含用于集成它的适用行，因为这就是我构建它的方式，但也尝试对此进行概括，并在必要时添加注释，使其适用于 vanilla Javascript实现 - 警告说我没有在这样的构造中使用它来测试它。
这些将是顶部、构造函数、React 框架中的绑定（与 vanilla Javascript 实现无关）：
this.uploadFile = this.uploadFile.bind(this);
this.processFile = this.processFile.bind(this);
this.errorHandler = this.errorHandler.bind(this);
this.progressHandler = this.progressHandler.bind(this);
您将拥有onDrop={this.uploadFile}DropZone 元素。如果您在没有 React 的情况下执行此操作，这相当于添加您要在单击“上传文件”按钮时运行的 onclick 事件处理程序。
<button onclick="uploadFile(event);" value="Upload File" />
然后是功能（适用的行......我将省略我重置上传进度指示器等）：
uploadFile(event){
// This is for React, only
this.setState({
files: event,
});
console.log('File count: ' + this.state.files.length);
// You might check that the "event" has a file & assign it like this
// in vanilla Javascript:
// var files = event.target.files;
// if (!files && files.length > 0)
// files = (event.dataTransfer ? event.dataTransfer.files :
// event.originalEvent.dataTransfer.files);
// You cannot use "files" as a variable in React, however:
const in_files = this.state.files;
// iterate, if files length > 0
if (in_files.length > 0) {
for (let i = 0; i < in_files.length; i++) {
// use this, instead, for vanilla JS:
// for (var i = 0; i < files.length; i++) {
const a = i + 1;
console.log('in loop, pass: ' + a);
const f = in_files[i]; // or just files[i] in vanilla JS
const reader = new FileReader();
reader.onerror = this.errorHandler;
reader.onprogress = this.progressHandler;
reader.onload = this.processFile(f);
reader.readAsDataURL(f);
}
}
}
对于vanilla JS，关于如何获取该文件对象的语法有一个问题：
JavaScript/HTML5/jQuery 拖放上传 - “未捕获的类型错误：无法读取未定义的属性‘文件’”
请注意，React 的 DropZone 已经this.state.files为您放入 File 对象，只要files: [],您this.state = { .... }在构造函数中添加。我从那篇关于如何获取 File 对象的帖子的答案中添加了语法。它应该有效，或者那里有其他帖子可以提供帮助。但 Q/A 告诉我的只是如何获取File对象，而不是 blob 数据本身。即使我确实fileData = new Blob([files[0]]);喜欢 sebu 的回答（var由于某种原因没有包含在其中），它也没有告诉我如何阅读该 blob 的内容，以及如何在没有 Promise 对象的情况下进行阅读。所以这就是 FileReader 的readAsArrayBuffer用武之地，尽管我实际上尝试过并发现我无法使用它们。
您将必须拥有与此构造一起使用的其他函数 - 一个用于处理onerror，一个用于onprogress（两者都在下面显示），然后是主要的，onload一旦reader在最后一行调用方法 on ，它就会实际完成工作. 基本上，据我所知，您将event.dataTransfer.files[0]直接传递给该onload函数。
所以该onload方法调用我的processFile()函数（仅适用行）：
processFile(theFile) {
return function(e) {
const bytes = e.target.result.split('base64,')[1];
}
}
并且bytes应该有 base64 字节。
附加功能：
errorHandler(e){
switch (e.target.error.code) {
case e.target.error.NOT_FOUND_ERR:
alert('File not found.');
break;
case e.target.error.NOT_READABLE_ERR:
alert('File is not readable.');
break;
case e.target.error.ABORT_ERR:
break; // no operation
default:
alert('An error occurred reading this file.');
break;
}
}
progressHandler(e) {
if (e.lengthComputable){
const loaded = Math.round((e.loaded / e.total) * 100);
let zeros = '';
// Percent loaded in string
if (loaded >= 0 && loaded < 10) {
zeros = '00';
}
else if (loaded < 100) {
zeros = '0';
}
// Display progress in 3-digits and increase bar length
document.getElementById("progress").textContent = zeros + loaded.toString();
document.getElementById("progressBar").style.width = loaded + '%';
}
}
和适用的进度指示器标记：
<table id="tblProgress">
<tbody>
<tr>
<td><b><span id="progress">000</span>%</b> <span className="progressBar"><span id="progressBar" /></span></td>
</tr>
</tbody>
</table>
和 CSS：
.progressBar {
background-color: rgba(255, 255, 255, .1);
width: 100%;
height: 26px;
}
#progressBar {
background-color: rgba(87, 184, 208, .5);
content: '';
width: 0;
height: 26px;
}
结语：
在内部processFile()，出于某种原因，我无法添加bytes到我在this.state. 因此，相反，我将其直接设置为attachmentsJSON 对象中的变量RequestForm- 与我this.state使用的对象相同。 attachments是一个数组，所以我可以推送多个文件。它是这样的：
const fileArray = [];
// Collect any existing attachments
if (RequestForm.state.attachments.length > 0) {
for (let i=0; i < RequestForm.state.attachments.length; i++) {
fileArray.push(RequestForm.state.attachments[i]);
}
}
// Add the new one to this.state
fileArray.push(bytes);
// Update the state
RequestForm.setState({
attachments: fileArray,
});
然后，因为this.state已经包含RequestForm：
this.stores = [
RequestForm,
]
我可以从那时起引用它this.state.attachments。不适用于 vanilla JS 的 React 功能。您可以使用全局变量在纯 JavaScript 中构建类似的构造，然后相应地推送，但要容易得多：
var fileArray = new Array(); // place at the top, before any functions
// Within your processFile():
var newFileArray = [];
if (fileArray.length > 0) {
for (var i=0; i < fileArray.length; i++) {
newFileArray.push(fileArray[i]);
}
}
// Add the new one
newFileArray.push(bytes);
// Now update the global variable
fileArray = newFileArray;
然后你总是只是引用fileArray，为任何文件字节字符串枚举它，例如var myBytes = fileArray[0];第一个文件。