有没有办法用React-dnd获取文件的内容？

Question

我想用react-dnd创建一个文件上传器，但我无法获取文件的内容，我只能获取有关文件的元数据，如文件名、大小等。

下面是我想要放入文件的React组件的代码：

import React from 'react';
import {
  DropTarget,
} from 'react-dnd';

import { NativeTypes } from 'react-dnd-html5-backend';

const style = {
    border: '1px solid gray',
    height: '15rem',
    width: '15rem',
    padding: '2rem',
    textAlign: 'center',
};

const spec = {
  drop(props, monitor){    
    console.log(monitor.getItem());
  }
};

const collect = (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
});

class TargetBox extends React.Component {
  render() {
    const { connectDropTarget } = this.props;
    return connectDropTarget(
      <div style={style}>

      </div>
    );
  }
}

export default DropTarget(
  NativeTypes.FILE, 
  spec, 
  collect
)(TargetBox);

下面是使用此组件的代码：

<DragDropContextProvider backend={HTML5Backend}>
    <TargetBox />
</DragDropContextProvider>

当我将一个文件拖放到TargetBox组件的区域时，spec对象的drop函数上的console.log仅提供有关该文件的以下信息：

lastModified: 1526416984630
lastModifiedDate: Tue May 15 2018 17:43:04 GMT-0300 (Brasilia Standard Time) {}
name: "product1.jpeg"
size: 14226
type: "image/jpeg"
webkitRelativePath: ""

但是我想检索文件的字节，这样我就可以将它们发送到服务器，有没有一种方法只使用react-dnd就可以做到呢？

Answer 1

我只需要使用FileReader应用程序接口。FileReader对象接受Blob，我在drop方法上收到的文件具有Blob对象的原型。因此，我只需将drop方法更改为以下代码：

drop(props, monitor ){    
    const droppedImage = monitor.getItem().files[0];

    const reader = new FileReader();
    reader.onloadend = (e) => console.log(e);
    reader.onprogress = (e) => console.log(e);
    reader.readAsArrayBuffer(droppedImage);       
}