el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上

el-upload在表单循环中，实现选择，删除，拖拽，并且和表单数组对上：

微信： volley369

业务要求，实现以下效果：

业务要求：

1. el-upload肯定不能一个个的写，要用json去循环
2. 点击某个el-upload，要定位到array中的某个值，上传图片后，这个值变
3. 要求能拖动，能删除
4. 传到阿里云的OSS上，最后array中的值，变为图片网址
5. 必要要TMD能上传照片，视频，PDF，并且是哪种格式，在json中已定义好

---

wx 以下代码只展示思路方法，具体的css和业务，还得和自己的工程对上。

布局代码：

<div  v-for="(item,index) in daikuan01.img">
	<el-upload
	     class="avatar-uploader img1567"
	     action=""
	     drag
	    :http-request="OSSUP"
	    :show-file-list="fff"
	    :before-upload="function (file) { return handleBefore(file, 21,index,item.type)}">
	    //根据自己的son数据判断预览图，是图片/视频/pdf
	    <img v-if="item.value.length>5" :src="getShow(item.type,item.value)" class="avatar">
	</el-upload>
</div>

下面是函数

1：选择文件时的钩子handleBefore：

这里before-upload的函数中周转了一个参数，直接获取json中index，进而获取需要
1：要传到json中哪个图片上
2：要传图片，还是视频，还是pdf

 handleBefore(file,a,b,c){
      this.check16Index = b;
      this.check16Type = a;
      this.check16PPV=c;
      if(this.check16PPV=='pic'){
        const isJPG = file.type === 'image/jpeg';
        const isJPG2 = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isJPG && !isJPG2) {
          this.$message.error('只能上传jpg/png');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过10MB!');
          return false;
        }
        return true;
      }else if(this.check16PPV=='video'){
        const isVideo = file.type === 'video/mp4';
        const isLt100M = file.size / 1024 / 1024 < 100;
        if (!isVideo) {
          this.$message.error('只能上传mp4');
          return false;
        }
        if (!isLt100M) {
          this.$message.error('mp4大小不能超过100MB!');
          return false;
        }
        return true;
      }else if(this.check16PPV=='pdf'){
        console.log(file.type)
        const isJPG = file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 50;
        if (!isJPG) {
          this.$message.error('只能上传pdf');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('大小不能超过50MB!');
          return false;
        }
        return true;
      }else{
        this.$message.error('此选项暂无可上传内容，请联系客服解决!');
        return false;
      }
    }
  }

2：上传到OSS的函数

import {client} from '../../../utils/oss.js';
OSSUP({file}) {
      var that = this;
      this.loadingMain = true;
      var fileName='';
      //oss传成功后，根据自己定义的标识，判断传的事什么类型，从而给oss生成url加标志
      if(this.check16PPV=='pic'){
        fileName = "pics/" + Date.parse(new Date()) + ".jpg";
      }else if(this.check16PPV=='video'){
        fileName = "pics/" + Date.parse(new Date()) + ".mp4";
      }else if(this.check16PPV=='pdf'){
        fileName = "pics/" + Date.parse(new Date()) + ".pdf";
      }
      client.put(fileName, file).then(({res, url, name}) => {
        this.loadingMain = false;
        if (res && res.status == 200) {
          url = 'https://www.xxxxxxxxx.cn/' + name
          //TODO oss传成功后，根据index去修改json内的值
           if (that.check16Type == 21) {
            that.daikuan01.img[that.check16Index].value = url;
          } else if (that.check16Type == 41) {
            that.zx_zdr1.img[that.check16Index].value = url;
          } else if (that.check16Type == 42) {
            that.zx_po1.img[that.check16Index].value = url;
          } else if (that.check16Type == 43) {
            that.zx_dbr1.img[that.check16Index].value = url;
          } else if (that.check16Type == 61) {
            that.car1.img[that.check16Index].value = url;
          }else if(that.check16Type==101){
            that.bxs.img[that.check16Index].value=url;
          }
          //........看自己的业务循环下去
        } else {
          console.log(res)
          that.$message.error('文件上传失败');
        }
      }).catch((err) => {
        that.loadingMain = false;
        console.log(err)
        that.$message.error('文件上传失败');
      });
    },

3：oss.js

首先去npm oss
然后新建oss.js

let Oss=require('ali-oss')
export let client  = new Oss({
    region: 'oss-cn-beijing',//节点
    accessKeyId: 'LTAI4G4W1..........',
    accessKeySecret: 'Rbxpl48fi9......',
    bucket: 'artis....'
})

tips:代码能跑，就别轻易重构他，稳定没你事，炸了就找你