react 拖拽上传

????最近项目要求一个拖拽上传图片的功能，项目要求的时间也比较紧，本着不重复造车轮以及没时间去从零开发的原则，在谷歌中搜索的一些文档，果然发现了一个开源的拖拽组件，react-dropzone，这个react拖拽组件，官方文档描述的很详细，可以根据自己的需求进行封装。

安装 react-dropzone

npm install --save react-dropzone

引入到项目

import Dropzone from ‘react-dropzone‘

应用

不多说直接来个拿来就能用的例子

class Basic extends React.Component {
  constructor() {
    super()
    this.state = { files: [] }
  }

  onDrop(files) {
    this.setState({
      files
    });
  }

  render() {
    return (
      <section>
        <div className="dropzone">
          <Dropzone onDrop={this.onDrop.bind(this)}>
            <p>Try dropping some files here,or click to select files to upload.</p>
          </Dropzone>
        </div>
        <aside>
          <h2>Dropped files</h2>
          <ul>
            {
              this.state.files.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
        </aside>
      </section>
    );
  }
}

<Basic />

当把图片组件区域的时候的时候,会触发组建的onDrop方法，方法会将file对象传入！

将文件传到后台

????将文件发送到服务器，要注意的就是要将file对象包装到FormData中。

let formFile = new FormData()   //  创建一个FormData对象用来储存file对象
formFile.append("file",file)  // 将file对象添加到实例化的FormData对象中
agent.post(url,{  // 通过ajax或者其他工具发送给后台
    data: formFile
}

????要封装成图片上传组件，需要预览功能，还可以用到window.URL.createObjectURL方法，这个方法的功能就是生成一个地址，不需要接受后台回传回来的图片地址，直接就可以通过这个地址来显示图片,减少了请求图片的时间和流量。

let fileurl = window.URL.createObjectURL(file)  // 创建本地连接 直接从本地获取图片来展示 用来减少无用的请求

????了解这几点，就可以进行自己组件的开发了，由于组件代码不是很难，根据自己用到的各种库的不同，所以只挑重要的代码写出来，有遇到问题的欢迎随时留言