预览
原上传文件方式
dropzone上传方式
{item.name}
)) :未选择任何文件
}每日质量NPM包拖拽文件上传_react-dropzone
一、react-dropzone
官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js.
理解: 一个为react量身定制,基于H5 API:drop && drag可以实现拖拽上传文件的npm插件包
是的,以后再也不用自己苦苦地封装drop和drag了, react-dropzone使用非常简单,只需要调用一个事件.
当然这个包是针对于react的(直接作为组件使用),如果需要非组件的,直接npm官网搜索dropzone即可.
简单看一个效果图
二、用法
第一步当然是给项目添加插件包
//安装
npm install -D react-dropzone
//项目引入
import ReactDropzone from 'react-dropzone'
//项目使用
))
}
样式相关属性
Default State(dropzone原始状态): className && style
Drag is Active(拖拽到盒子上但未放开): activeClassName && activeStyle
Dropped Files are Accepted(拖拽后,文件能被识别): acceptClassName && acceptStyle
Dropped Files are Rejected(拖拽后,文件不能被识别):
rejectClassName && rejectStyle
Dropzone is Disabled(功能被禁止时): disabledClassName && disabledStyle
最后一条是在disabled="true"时生效
当设置了这个属性,在DOM里可以看到变成:aria-disabled="true"
字面上意思应该是无障碍交流,当时我实际上用的时候,是自动打开这个文件.(比如拖拽了一个图片后,会自动用浏览器打开)
结合React
import React,{ Fragment } from 'react'
import './style.css'
import ReactDropZone from 'react-dropzone'
export default class DropzoneComp extends React.Component{
constructor(props){
super(props)
this.state = {
fileArr: []
}
this.handleDrop = this.handleDrop.bind(this);
}
handleDrop(acceptFile, rejectFile){
let { fileArr } = this.state;
console.log('acceptFile ======>', acceptFile)
console.log('rejectFile ======>', rejectFile)
if(rejectFile.length){
alert('不支持该格式')
return;
}
acceptFile.map( item => {
fileArr.push(item)
})
this.setState({
fileArr,
})
}
render(){
const { fileArr } = this.state;
return(
+
{
fileArr.length ? fileArr.map( (item, index) => (
{
fileArr.length > 0 && fileArr.map( (item, index) => (
))
}
)
}
}
https://www.cnblogs.com/soyxiaobi/p/9735067.html
