Reactjs 如何从material ui dropzone上传的文件中获取Blob？

我正在努力解决以下问题：

我在react项目中使用

material ui dropzone

作为文件上传程序。 以下是

DropZone

组件：

import React, { Fragment } from 'react';
import { DropzoneArea } from 'material-ui-dropzone';

class DropZone extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {handleFile} = this.props
    return (
      <Fragment>
        <div>
          <DropzoneArea
            showPreviews={true}
            showPreviewsInDropzone={false}
            useChipsForPreview
            previewGridProps={{container: { spacing: 1, direction: 'row' }}}
            previewText="Selected files"
            onChange={handleFile}
            filesLimit={1}
            showPreviews
            maxSize={500000000}
          />
        </div>
      </Fragment>
    );
  }
}

export default DropZone;

问题是，当我上传文件时，错误显示：

TypeError:未能对“FileReader”执行“readAsArrayBuffer”：参数1不是“Blob”类型。

这是很明显的。它表示

reader.readAsArrayBuffer（file）

中的输入参数不是Blob，但是

readAsArrayBuffer

需要一个Blob。因此，

reader.onload（）

中的任何代码都不会执行

如果我注释掉

reader.readAsArrayBuffer（file）

行，控制台日志将打印上载的文件（即代码中的

file

，或

loadedFiles[0]

），我可以看到以下内容：

File {path: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2", name: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2", lastModified: 1581235163000, lastModifiedDate: Sun Feb 09 2020 16:59:23 GMT+0900 (Japan Standard Time), webkitRelativePath: "", …}
lastModified: 1581235163000
lastModifiedDate: Sun Feb 09 2020 16:59:23 GMT+0900 (Japan Standard Time) {}
name: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2"
path: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2"
size: 526884
type: ""
webkitRelativePath: ""
__proto__: File
lastModified: (...)
lastModifiedDate: (...)
name: (...)
size: (...)
type: (...)
webkitRelativePath: (...)
constructor: ƒ File()
Symbol(Symbol.toStringTag): "File"
get lastModified: ƒ lastModified()
get lastModifiedDate: ƒ lastModifiedDate()
get name: ƒ name()
get webkitRelativePath: ƒ webkitRelativePath()
__proto__: Blob

这就是

材质ui dropzone

的

DropzoneArea

给我的对象。这是一团吗？我怎样才能把这个弄成一团

File {path: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2", name: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2", lastModified: 1581235163000, lastModifiedDate: Sun Feb 09 2020 16:59:23 GMT+0900 (Japan Standard Time), webkitRelativePath: "", …}
lastModified: 1581235163000
lastModifiedDate: Sun Feb 09 2020 16:59:23 GMT+0900 (Japan Standard Time) {}
name: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2"
path: "1.2.840.113619.2.416.2007613730195585237539498016923856630.2"
size: 526884
type: ""
webkitRelativePath: ""
__proto__: File
lastModified: (...)
lastModifiedDate: (...)
name: (...)
size: (...)
type: (...)
webkitRelativePath: (...)
constructor: ƒ File()
Symbol(Symbol.toStringTag): "File"
get lastModified: ƒ lastModified()
get lastModifiedDate: ƒ lastModifiedDate()
get name: ƒ name()
get webkitRelativePath: ƒ webkitRelativePath()
__proto__: Blob