最近项目要求一个拖拽上传图片的功能,项目要求的时间也比较紧,本着不重复造车轮以及没时间去从零开发的原则,在谷歌中搜索的一些文档,果然发现了一个开源的拖拽组件,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) // 创建本地连接 直接从本地获取图片来展示 用来减少无用的请求
了解这几点,就可以进行自己组件的开发了,由于组件代码不是很难,根据自己用到的各种库的不同,所以只挑重要的代码写出来,有遇到问题的欢迎随时留言