vue element图片、视频上传删除回显，动态添加上传组件的区分字段上传

每次遇到图片上传都很麻烦 其中删除 回显 格式限制，很繁琐，特别遇到动态添加多个上传组件 进行分别上传时， 这次终于全部搞定 ，特地记录下来整个过程。

需求：
添加图片、添加视频、添加多个图片、动态添加多个上传组件
主要分为三个部分：1、单图片上传 2、多图片上传 3、动态添加表单项的多个上传（复杂、难点）

多个动态添加 多张图片 单张图片上传 还有回显的问题
1、单张图片上传 ：用的是element 上传组件 自动上传：http-request 上传成功之后 将后台图片地址赋值给表单回显

 <el-form-item label="缩略图：" prop="cover">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="handleLogo"
          >
            <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div>
            (图片展示在前台采购商列表中,建议上传企业logo或产品图,最多1张图片,支持PNG、JPEG、GIF格式图片,单张图片不超过20M)
          </div>
        </el-form-item>

 // logo
    handleLogo(item) {
   
      console.log(item)
      //验证图片格式大小信息
      const isJPG =
        item.file.type == 'image/jpeg' ||
        item.file.type == 'image/png' ||
        item.file.type == 'image/gif'
      const isLt2M = item.file.size / 1024 / 1024 < 20
      if (!isJPG) {
   
        this.$message.error('上传图片只能是 JPG 或 PNG或 GIF 格式!')
        return false
      }
      if (!isLt2M) {
   
        this.$message.error('上传图片大小不能超过 20M!')
        return false
      }
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt2M == true) {
   
        //定义FormData对象 存储文件
        let mf = new FormData()
        //将图片文件放入mf
        mf