IT干货网

react 拖拽上传

qq123 2022年03月15日 编程设计 225 0

    最近项目要求一个拖拽上传图片的功能,项目要求的时间也比较紧,本着不重复造车轮以及没时间去从零开发的原则,在谷歌中搜索的一些文档,果然发现了一个开源的拖拽组件,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对象传入!
image

将文件传到后台

    将文件发送到服务器,要注意的就是要将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)  // 创建本地连接 直接从本地获取图片来展示 用来减少无用的请求 
 

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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!