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 (
      

        

          
            
Try dropping some files here, or click to select files to upload.
          
        
        

          
Dropped files
          

            {
              this.state.files.map(f => 
{f.name} - {f.size} bytes
)
            }
          
        
      
    );
  }
}

当把图片组件区域的时候的时候,会触发组建的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)  // 创建本地连接 直接从本地获取图片来展示 用来减少无用的请求

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

转载于:https://www.cnblogs.com/slongs/p/9846149.html