东方网升 react 版本上传组件
npm install dfws-react-upload1. 更改package.json版本
2. yarn run build
3. npm publish 注:镜像源需切换回NPM官方源
- 更新日志
- yarn
- yarn start
该组件依赖于react,jsonp,plupload,使用之前请配置react,jsonp,plupload。
- 需要oss文件上传。
``html``
const UploadData = {
browse_button: 'auto-upload',
url: 'oss',
format: 'jpg,png',
maxSize: '4',
success: this.success,
multi_selection: true,
drop_element: 'drop',
error: function (err) {
console.log(err)
},
tipsFun: function (err) {
alert(err.msg)
},
progress: function (uploader, file) {
console.log(uploader.files)
console.log(file.percent)
},
}
上传文件
拖拽上传
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| uuid | 上传资源业务对应uuuid | string | - |
| ticket | 用户ticket,调用request方法不需要传值 | string | - |
| channel | 来源渠道,调用request方法不需要传值 | obeject | - |
| debug | 是否打开调式模式 | boolean | false |
| isEncoding | 调用request方法时生效 | boolean | false |
| onGetUpload | 获取上传方法实例 | function | - |
| request | 基础请求基类 | function | - |
| browse_button | 触发文件选择对话框的DOM元素的id,当点击该元素后便后弹出文件选择对话框 | string or DOM | - |
| success | 上传成功后的回调函数 返回数组 [{file:文件信息,url:上传完成后的路径}] | function | - |
| error | 上传失败后的回调函数 返回数组[]err信息 | function | - |
| tipsFun | 选择文件不符合限制的回调函数 返回 {type:1,msg:'格式错误'} {type:2,msg:'大小错误'} | function | - |
| fileAdd | 选择文件后手动操作文件的回调函数 返回[] 选择的文件组 需要与isStart并用 | function | - |
| progress | 上传时的回调函数 返回uploader,file uploader为当前的plupload实例对象,file为触发此事件的文件对象 | function | - |
| multi_selection | 是否多选 | boolean | true |
| isStart | 是否选择完文件后自动上传 | boolean | true |
| maxSize | 文件最大限制 单位M | number | - |
| format | 可选的文件格式 以逗号分割 | string | - |
| container | 上传的容器 | string or DOM | - |
| drop_element | 指定了使用拖拽方式来选择上传文件时的拖拽区域的id | string or DOM | - |
uploader实例对象 start()启动上传 addUploadFile(file,uploader) 添加文件进入上传队列(操作文件后使用) file:需要添加的文件 uploader:uploader实例对象