<uploader
v-model="fileList"
:url="remoteUrl"
name="upload"
title="自动上传"
:params="{
token: '13579',
linkid: '2323',
modelname: 'modelname'
}"
:headers="{
'custom-header': 'custom-info',
}"
:limit="6"
:limitPrompt="limit => `已经上传${limit}张图片嘞!`"
withCredentials
@before-upload="beforeUpload"
@after-upload="afterUpload"
@on-change="onChange"
@on-cancel="onCancel"
@on-success="onSuccess"
@on-error="onError"
@on-delete="onDelete"
/>
API
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| title | string | 图片上传 | 组件标题 | -- |
| files | array | [] | 初始化数据源,通过on-fileList-change事件绑定 v-model | -- |
| limit | number string | 5 | 限制上传图片个数 | -- |
| limitPrompt | function | (limit) => `不能上传超过${limit}张图片` | 限制上传alert的提示语 | -- |
| capture | number string | false | 是否只选择调用相机 | -- |
| enableCompress | boolean | true | 是否压缩 | -- |
| maxWidth | string number | 1024 | 图片压缩最大宽度 | -- |
| quality | string number | 0.92 | 图片压缩率 | -- |
| url | string | 上传服务器 url | -- | |
| headers | object | {} | 上传文件时自定义请求头 | -- |
| withCredentials | boolean | 设置为true的话,支持标准CORS设置cookie值 | -- | |
| params | object | 上传文件时自定义参数 | -- | |
| name | string | file | 上传文件时 FormData 的 Key,默认为 file | -- |
| autoUpload | boolean | true | 是否自动开启上传 | -- |
| multiple | string boolean | 是否支持多选, false为不支持 | -- | |
| readonly | boolean | false | 只读模式(隐藏添加和删除按钮) | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (FileItem, FileList) | 选完照片,删除照片时,FileList 变化时触发,返回当前改变的 FileItem,以及当前的 FileList | -- |
| @on-cancel | -- | 选择照片后取消的回调,用于错误提示 | -- |
| @on-success | (result, fileItem) | 上传请求成功后的回调,返回远程请求的返回结果,及当前添加文件的 FileItem | -- |
| @on-error | (xhr) | 上传请求失败后的回调,返回xhr | -- |
| @on-delete | (cb) | 上传删除照片时的回调,返回隐藏 Previewer,删除图片的回调,没监听onDelete事件的时候,直接执行删除回调 | -- |
| @before-upload | -- | 上传图片之前的回调 | -- |
| @after-upload | (action) | 上传图片之后的回调 | -- |