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对象的放置功能上的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 API。 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);       
}

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

1 个答案: