javascript - React DropzoneComponent 在上传之前在本地打开/修改文件

Question

我正在使用基于 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 兼容，可能是版本问题？？

Answer 1

所以在谷歌搜索了 2 天后，我在周末找到了自己。使用 new window.FileReader() 而不是 new FileReader() 可以毫无问题地加载文件。仍然不确定为什么，但是嘿它有效¯_(ツ)_/¯