1.基础用法
<cube-upload
ref="upload1"
v-model="files1"
:action="action"
:multiple="false"
:simultaneous-uploads="1"
:process-file="processFile"
@files-added="addedHandler1"
@file-error="errHandler"
@file-success="uploadSuccess1"
@file-click="fileClick" //缩略图
>
2.自定义样式
<cube-upload
ref="upload1"
v-model="files1"
:action="action"
:multiple="false"
:simultaneous-uploads="1"
:process-file="processFile"
@files-added="addedHandler1"
@file-error="errHandler"
@file-success="uploadSuccess1"
>
<cube-upload-file
v-for="(file, i) in files1"
:file="file"
:key="i"
@click="fileClick" //缩略图
></cube-upload-file>
<cube-upload-btn :multiple="false">
<img src="~@/icons/camera.svg" />
<span>证件正面</span>
</cube-upload-btn>
</cube-upload>
自定义样式实现缩略图关键为该css样式，提交图片后会自动显示该样式
/deep/ .cube-upload-file-status.cubeic-right::after {
width: 165px;
height: 110px;
border-radius: 0;
background-color: #fff0;
}
以下为公用方法
uploadSuccess1(res) {
this.imgs = [];
this.imgs.push(res.url);
}
fileClick() {
this.$createImagePreview({ //cube-ui 自带图片预览
imgs: this.imgs
}).show(）
},
