element多图上传回显封装

<template>   <div>     <el-upload       :action="$url.programe+'thirdUpload/unauth/uploadImage'"       list-type="picture-card"       :file-list="updateList"       :on-success="handleAvatarSuccess"       :on-preview="handlePictureCardPreview"       :on-remove="handleRemove"     >       <i class="el-icon-plus"></i>     </el-upload>     <el-dialog v-model="dialogVisible">       <img style="width:100%;height:100%" :src="dialogImageUrl" alt />     </el-dialog>   </div> </template>
<script> export default {   data() {     return {       dialogImageUrl: "",       dialogVisible: false,       list: [],       updateList: []     };   },   props: {     fileList: {       type: Array,       default() {         return [];       }     }   },   mounted() {     this.updateList = [];     this.fileList.forEach(item => {       this.updateList.push({         response: {           data: item         },         url: this.$image + item.path       });     });     this.list = this.fileList;   },   methods: {     handleRemove(file, fileList) {       var num = -1;       this.list.forEach((item, index) => {         if (item.path == file.response.data.path) {           num = index;         }       });       if (num !== -1) {         this.list.splice(num, 1);       }       this.$emit("upload", this.list);     },     handlePictureCardPreview(file) {       this.dialogImageUrl = file.url;       this.dialogVisible = true;     },     handleAvatarSuccess(res, file) {       this.list.push(res.data);       this.$emit("upload", this.list);     }   } }; </script>
        <el-form-item label="课程详情图（多张）:" prop="bannerImg">           <hupload1             :fileList="from.bannerImg"             @upload="             (e) => {               from.bannerImg = e;             }           "           ></hupload1>         </el-form-item>

标签：data,list,fileList,element,item,多图,num,file,传回
来源： https://www.cnblogs.com/heyz/p/15102511.html