使用图片上传组件:
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>