使用圖片上傳組件:
show-upload-list:是否展示上傳的文件
custom-request:自定義上傳方法
<a-upload
list-type="picture-card"
:custom-request="customRequest"
:support-server-render="supportServerRender"
:show-upload-list="false"
>
<div v-if="fileList.length < 3">
<a-icon type="plus" />
<div class="ant-upload-text">
上傳
</div>
</div>
</a-upload>
定義上傳實現:
customRequest(file) {
this.supportServerRender = true;
uploadPicture(file).then(res=>{
this.supportServerRender = false;
if(res.success){
this.fileList.push({url:res.data});
this.$message.success("上傳成功!");
}else{
this.$message.error("上傳失敗!");
}
});
},
delImg(index){
this.fileList.splice(index,1);
},
自定義展示樣式:
<a-col v-for="(item,index) in fileList" :key="index"> <img :src="item.url" style="width:80%;height:260px;margin-bottom:10px;"> <a-icon type="delete" class="delete" title="點擊刪除" @click="delImg(index)"/> </a-col>
