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()可以毫无问题地加载文件。仍然不确定为什么，但嘿它的作用¯_（ツ）_ /¯

在上载之前，React DropzoneComponent在本地打开/修改文件

1 个答案: