添加beforeUpload,控制大小等,remove用于删除,file-list存放上传的文件:
<a-upload
name="file"
v-decorator="[
'file',
{
rules: [{ required: true, message: '请上传文件' }],
},
]"
accept=".jpg,.png,.bmp"
:file-list="fileList"
:before-upload="beforeUpload"
:remove="handleRemove"
:customRequest="customRequest"
>
<div class="ant-upload-preview">
<img class="cover" :src="imageUrl" @error="setDefaultImage" />
</div>
</a-upload>
beforeUpload(file) {
let MSize=1024*1024
let fileSize =file.size;
var size = fileSize /MSize;
if(size>5){
this.$message.error('文件大小控制在5M内')
return false
}else{
this.fileList = [file];
}
},
setDefaultImage(e) {
e.target.src = require("/src/assets/img/emptypic.png");
},
handleRemove(file){
this.fileList=[]
this.file=null
this.form.setFieldsValue({file:null})
this.option.img=require('/src/assets/img/emptypic.png')
return true
},
customRequest(file){
this.file=file
this.handleUpload(file)
},
handleUpload(filedto) {
if(filedto){
const _this = this
let file=filedto.file
const formData = new FormData()
let ext = file.name.replace(/.+\./, "")
let name=file.name
let blob=new Blob([file])
formData.append('type',ext)
formData.append('file', blob,name)
uploadPic(formData).then(res={
...
let URL = window.URL || window.webkitURL; // 获取当前域名地址
_this.imgUrl = URL.createObjectURL(file); // 拼接 URL + file 并转成 blob地址, 回显本地图片
})
}