上传前在本地反应 Dropzone 组件 open/modify 文件

Question

我正在使用基于 DropzoneComponent（Dropzone 的包装器）构建的自定义上传器来构建应用程序。在将文件上传到服务器之前，我想打开并更改文件，但我发现无法使用 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() 使文件加载没有问题。仍然不确定为什么，但嘿它有效¯_(ツ)_/¯

上传前在本地反应 Dropzone 组件 open/modify 文件

React DropzoneComponent open/modify file locally before upload

javascript

filereader

dropzone.js

reactjs

react-dropzone