我正在使用基于 DropzoneComponent（Dropzone 的包装器）的自定义 Uploader 构建应用程序。在将文件上传到服务器之前，我想打开并更改文件，但我发现无法使用 FileReader 打开文件。
在代码中找到 2 条注释，哪个部分失败。
"dependencies": {
"filereader": "^0.10.3",
"js-cookie": "^2.1.4",
"react": "^16.2.0",
"react-dropzone-component": "^3.1.2",
}
例子：
import React from 'react';
import DropzoneComponent from 'react-dropzone-component';
import * as Cookies from "js-cookie";
import FileReader from "filereader";
export default class CustomUploader extends React.Component {
constructor(props) {
let headers = {
'X-CSRFToken': Cookies.get('csrf_token'),
};
this.config = {
iconFiletypes: ['.data'],
showFiletypeIcon: true,
postUrl: '/upload',
};
this.djsConfig = {
headers:headers,
autoProcessQueue: true,
autoQueue: true,
previewTemplate: ReactDOMServer.renderToStaticMarkup(
<div className="col-3 dz-preview dz-file-preview">
<div className="dz-details">
<img className="dz-preview-image" data-dz-thumbnail="true" />
</div>
</div>
),
};
this.eventHandlers = {
addedfile: (file) => {
// THIS GETS CALLED PROPERLY but the provided does
// not seem to be loadable by FileReader :-(
const reader = new FileReader();
reader.onloadend = function (e) {
console.log(e.target.result);
};
reader.onerror = function (e) {
console.log(e.target.error);
};
// THIS IS WHERE IT FAILS, "file" object obviously
// misses "path" attribute for some reason and reader
// cannot open it, do you have any idea how/where to
// access local path or how to open and modify the file?
reader.readAsArrayBuffer(file);
},
};
};
render() {
return (
<div className="dz-wrapper">
<DropzoneComponent config={this.config}
eventHandlers={this.eventHandlers}
djsConfig={this.djsConfig}
className="row">
</DropzoneComponent>
</div>
);
}
};
我按照教程如何做到这一点，但似乎 Dropzone 中的文件对象由于某种原因具有与 FileReader 不兼容的不同结构，也许是版本问题？