vux-uploader-component
a mobile vue component implementation for weui uploader.
Usage
Basic
Custom name
Extra Params
Manual Upload
Props
property | type | default | description |
---|---|---|---|
title | String | '图片上传' | 组件标题 |
files | Array | [] | 初始化数据源,通过on-fileList-change 事件绑定 v-model |
limit | Number | String | 5 | 限制上传图片个数 |
capture | Number | String | false | 是否只选择调用相机 |
enableCompress | Boolean | true | 是否压缩 |
maxWidth | String | Number | 1024 | 图片压缩最大宽度 |
quality | String | Number | 0.92 | 图片压缩率 |
url | String | - | 上传服务器 url |
params | Object | - | 上传文件时携带的自定义参数 |
name | String | 'file' | 上传文件时 FormData 的 Key,默认为 file |
autoUpload | Boolean | true | 是否自动开启上传 |
multiple | String | Boolean | "" | 是否支持多选, false 为不支持 |
readonly | Boolean | false | 只读模式(隐藏添加和删除按钮) |
Events
event | param | description |
---|---|---|
on-change | (FileItem, FileList) |
选完照片,删除照片时,FileList 变化时触发,返回当前改变的 FileItem,以及当前的 FileList |
on-cancel | () |
选择照片后取消的回调,用于错误提示 |
on-success | (result, fileItem) |
上传请求成功后的回调,返回远程请求的返回结果,及当前添加文件的 FileItem |
on-error | (xhr) |
上传请求失败后的回调,返回xhr |
on-delete | (cb) |
删除照片时的回调,返回隐藏 Previewer,删除图片的回调,没监听onDelete 事件的时候,直接执行删除回调 |
v-model
通过 v-model 可以在组件外部获取更新的组件的FileList
返回的 FileItem 格式
目前将 File 对象的属性复制组成 FielItem, FileItem 组成 FileList,便于用户获取 File 对象的信息