图片上传
基础用法
vue
<template>
<ws-image-upload v-bind="options"/>
</template>
<script>
export default {
data () {
return {
options: {
localPreview: true,
quantity: 5,
actions: {
url: '/system/file/addAttachment', //上传地址,优先级高于moduleName
// moduleName: '', //可根据模块名和op自动匹配上传地址,url和moduleName 择二选一
op: 'addAttachment' //上传op,优先级高于moduleName
},
beforeUpdate: this.beforeUpdate,
afterUpload: this.afterUpload
}
}
},
methods: {
beforeUpdate(){
return {}
},
afterUpload(data) {
return data;
}
}
}
</script>
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
actions | 上传配置 | Object | {} |
urlList | 图片地址集合,可用于修改返回图片地址 | Array | [] |
disable | 是否禁用 | Boolean | false |
inputReadyOnly | 是否只展示上传框,不能点击弹出文件选择框 | Boolean | false |
localPreview | 是否本地生成图片预览 异步上传 | Boolean | false |
multi | 是否可以选择多张图 | Boolean | false |
multiple | multi为true下,多图上传是否分多次上传 | Boolean | true |
quantity | 最大上传数量, 0 为不限制 | Number | 1 |
size | 单张图片上传大小 单位 M,默认10M | Number | 10 |
isDelete | 是否可以删除图片 | Boolean | true |
isViewer | 是否需要图片预览 | Boolean | true |
handlePreview | 点击图片预览触发事件,viewer=true 生效 | Function | - |
handleRemove | 删除图片触发事件,delete=true生效,返回false可阻止删除图片 | Function | - |
beforeUpdate | 上传之前事件,返回false可取消上传,可用于传递上传参数data | Function | - |
afterUpload | 上传成功回调函数,返回响应值 | Function | - |
asyncResolve | 所有异步上传执行完毕回调 | Function | - |