封装elmentui中的el-upload上传图片，回显图片，多张图片上传，只调用一次上传接口

1、父级页面调用

// 结构
<el-form-item label="上传图片" >
  <upload-img @updateFileList="updateFiles" :filesData="filesData" :isEdit="isEdit"></upload-img>
</el-form-item>


//js
import uploadImg from './uploadImg.vue' //引入上传组件
export default {
	components: {
	   uploadImg,
	 },
	data() {
	 return {
	  isEdit:false,//是否是编辑
	  filesList:[], // 上传前的附件列表
	  formData:'', // 附件文件流
	  filesData:[] //回显图片列表
	 }
	},
	methods: {
		// 附件(父级拿到的附件数组)
		updateFiles(list){
		  if(list.length>0){
		    this.filesList = list
		  }
		},

	}	

2、子组件uploadImg 的代码

<template>
  <div>
    <el-col :span="12">
      <el-upload
      ref="uploadObj"
      :action="uploadFileUrl"
      list-type="picture-card"
      multiple
      :limit='limitNum'
      name="supeFile"
      :file-list="formData.fileList"
      :on-error="handleError"
      :on-change="handleChange"
      :auto-upload="false"
      :acceptType="acceptType"
      style="display: flex; flex-wrap: wrap;">
      <i slot="default" class="el-icon-plus">
        <p>上传图片</p>
      </i>
      <div class="fileDiv" slot="file" slot-scope="{file}">
        <div class="fileClass">
          <!-- 图片 -->
          <template v-if="file.status=='ready'">
             <el-image 
              class="pic-img"
              :src="file.url" 
              :preview-src-list="[file.url]">
            </el-image> 
          </template>
          <template v-else>
            <el-image 
              class="pic-img"
              :src="loadPath+file.url" 
              :preview-src-list="[loadPath+file.url]">
            </el-image>
            </template>
            <template v-if="file.status=='ready'">
          <i
            	class="deleteIcon el-icon-circle-close"
              @click="deleteUploadItem(file)"
           	></i>
             </template>
        </div>
         
      </div>
    </el-upload>
   </el-col>

  </div>
</template>

<script>
import { superUploadFile } from '../../../../api';
export default {
  props: {
    // 回显的附件列表
    filesData:{
      type: Array,
      default: []
    },
    // 是否是编辑
    isEdit:{
      type: Boolean,
      default: false
    }
  },
  watch: {
     filesData:{
          handler(val, old) {
            // this.formData.fileList=val
            this.formData.fileList = []
            if(val!=null){
              if(val.length>0){
                val.forEach((re,index)=>{
                  this.formData.fileList.push({
                    name: '',
                    url: re,
                    id: index,
                    status: "success",
                    suffixName: ''
                  })
                })
              }
            }else{
              this.formData.fileList = []
            }
           
              
          }
      },
      isEdit:{
       handler(val, old) {
         if(!val){
           this.formData.fileList = []
         }
         
       }
     },

  },
  data() {
    return{
      loadPath:window.serverUrl.DEV_SERVER,//public文件夹》config.js配置服务地址
      uploadFileUrl: '#', // 上传的图片服务器地址
      acceptType:'.bmp, .gif, .jpg, .jpeg, .png',
      formData:{
        fileList:[
          // {
          //   name:"测试数据文件.elsx",
          //   url:''
          // }
        ]
      },
      fileOption:[],
      limitNum:5,// 限制一次上传5张
    }
  },
  methods:{

    // 删除上传列表
    deleteUploadItem(file,fileList) {
      let _this = this
      var newArr = this.fileOption
      newArr.forEach((item, index) => {
        if(file.uid == item.uid){
          newArr.splice(index, 1)
        }
      })
      this.fileOption = newArr
      let uploadFiles = this.$refs['uploadObj'].uploadFiles;
      uploadFiles.splice(uploadFiles.indexOf(file), 1);
      this.$emit('updateFileList',_this.fileOption)
      _this.$message({
          message: '删除成功！',
          type: 'success'
      });
    },
    
    // 上传失败
    handleError() {
      this.$message.error(`附件上传失败 !`);
    },
   
    handleChange(file, fileList){
      let _this = this
      
      // 上传校验
      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = ['bmp','gif','jpg','jpeg','png'];
      const isLt2M = file.size / 1024 / 1024 < 30
      if(!extension.includes(testmsg)) {
          this.$message({
              message: '上传文件只能是 bmp、gif、jpg、jpeg、png格式!',
              type: 'warning'
          });
          fileList.splice(-1, 1);//移除错误文件
          return false;
      }
      if(!isLt2M) {
          this.$message({
              message: '上传文件大小不能超过 30MB!',
              type: 'warning'
          });
          fileList.splice(-1, 1);
          return false;
      }

      this.fileOption.push(fileList[0])
      this.$emit('updateFileList',_this.fileOption)
    },
   

  },
  mounted(){
    this.fileOption=[]
  }
}
</script>

<style lang="scss">
.el-upload-list--picture-card .el-upload-list__item{
  background: unset;
  width: unset;
  height: unset;
  border:0;
}
.el-upload--picture-card{
  background: unset;
  width: 90px;;
  height: 70px;;
  line-height: 90px;
  margin: 5px;
}
.fileDiv{
  width: 90px;
	height: 70px;
  position: relative;
  padding:5px;
}
.fileClass {
	width: 90px;
	height: 70px;
	text-align: center;
	background: rgba(67,137,249,0.16);
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	
	margin-right: 5px;
	.icon-download {
		display: none;
	}
	&:hover {
		.icon-document {
			display: none;
		}
		.icon-download {
			display: block;
		}
	}
	p, .btn-trip {
		display: block;
		font-size: 12px;
		font-weight: 500;
		color: #4389F9;
		max-width: calc(100px);
		padding: 0 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	i {
		font-size:  30px;
		font-weight: bold;
		color: #00cfff;
	}
	.deleteIcon {
		font-size: 16px;
		font-weight: 100;
		color: #F1615D;
		background: #fff;
		border-radius: 50%;
		position: absolute;
		z-index:1800;
		pointer-events: auto;
		top: 0px;
		right: 0px;
		&:hover {
			color: #FFF;
			background: #4389F9;
		}
	}
}

</style>

3、效果如下