图片上传组件说明:
- 基础用法: <w-image-uploader v-model="value" :getUploadKey="getUploadKey" max="1"
v-model:uploading="uploading" />
- 属性(getUploadKey):获取上传凭证的方法,需要使用者提供,开发模式下提供:
前端示例
const getUploadKey =async () => {
let r = await request.get("/file/upload/getUploadKey")
return r.data
}
后端示例
@GetMapping("getUploadKey")
public R getUploadKey() {
return R.ok().setData(FileUtils.getUploadKey());
}
- 属性(v-model):双向绑定上传的文件URL,max=1是类型为String,否则为Array
- 属性(v-model:uploading):双向绑定是否上传中,PS: 上传完成后才允许业务表单提交
- 属性(max):允许上传的文件数量,0表示没有限制,默认:0
- 属性(prefix):上传路径前缀,默认:default
- 属性(disabled):禁止上传(图片预览模式), 默认:false
- 属性(text):按钮文字,默认:上传图片
- 属性(maxSize):允许上传的文件最大大小,0表示不限制,默认:0
- 属性(threadNum):并行上传数量:默认:2
- 属性(retry):重试次数,默认:3
- 属性(saveSrc):是否保存图片原文件,如果true,则下载时下载原图zip文件,否则下载大图片,默认:false
- 属性(saveMin):是否保存缩略图,如果true,则列表时显示缩略图,否则显示大图,默认:true
- 属性(watermark):是否添加水印,默认:true
- 属性(noEffect):是否无效果,本质设置css属性,默认:false
- css属性(--image-size):图片显示大小,默认: 10em
- css属性(--image-border-radius):图片显示圆角,默认: .4em
- css属性(--image-margin):图片外边距,默认: .5em .5em 0 0
- css属性(--image-border):图片边框,默认: #FFF solid 2px
- css属性(--image-box-shadow):图片阴影,默认: 0 0 .2em #0005
- 插槽(button):上传按钮插槽
- 插槽(default):图片列表插槽,作用域:list,不建议定义
- 事件(change):modelValue发送了变化
单图片上传
绑定值:{{ imgs[0] }}
{{ imging ? '上传中' : '没有上传' }}
重写的图片预览组件测试
9张图片上传
绑定值:{{ imgs[1] }}
预览模式