element upload实现图片批量上传与预览（自定义上传）

1、首先实现图片批量上传

首先是html代码：

http-request：覆盖默认的上传行为，可以自定义上传的实现

<el-form enctype="multipart/form-data"> <el-form-item label=""> <el-upload multiple ref="upload" :action="action" :headers="{processData: false,contentType: false}" name="file" :data="filist" list-type="picture-card" :file-list="fileList" :limit="20" :auto-upload="false" :with-credentials="true" :disabled="productMainDisable" :on-progress="handleUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="uploadFile" :before-upload="beforeAvatarUpload"> <i class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip"> <p>1、上传图片只能是 JPG/PNG 格式!</p> <p>2、上传图片大小不能超过 5MB!</p> </div> <!-- :on-success="weiBo" --> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> </el-form>

在data里面定义：
action: Domain + '/supplier/purchase/purchasedeliver/createPurchaseSignPod', //上传图片地址
fileList: [],
filist: {
   uuid: ''  ，//需要附带的参数
},
 formDate: "",
 isbandel:false,

　　　　uploadFile(file) {
                this.formDate.append('file', file.file);
            },
            //上传签收单
            uploadpicture(uuid) {
                console.log(uuid)
                this.classifyWindow = true;
                this.filist.uuid = uuid;
            },
            //确认上传图片  （自定义上传实现）
            submitUpload() {
                var that = this
                if(that.formDate){
                    that.isbandel = true;
                }
                console.log(that.formDate)
                that.formDate = new FormData()
                that.$refs.upload.submit();
                that.formDate.append('uuid', that.filist.uuid);
                $.ajax({
                    url: Domain + "/supplier/purchase/purchasedeliver/createPurchaseSignPod",
                    dataType: "json",
                    method: "POST",
                    contentType:false,
                    processData:false,
                    // contentType: "multipart/form-data",
                    data: that.formDate,
                    success: function (ret) {
                        if (ret.retStatus == "1") {
                            that.$message({
                                type: "success",
                                message: "上传成功！"
                            });
                            // 调用列表页刷新数据方法
                            that.classifyWindow = false;
                            that.isbandel = false;
                            that.doSearch();
                            that.canleUpload();
                        }
                    },
                });
            },
            //取消上传
            canleUpload() {
                this.classifyWindow = false;
                this.$refs.upload.clearFiles();
            },
            handleUpload: function (event, file, fileList) {
                this.productMainDisable = true;
            },
            //查看大图
            handlePictureCardPreview: function (file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //    文件删除操作
            handleRemove: function (file, fileList) {
                this.fileList = [];
                this.fileList = fileList;
            },
            //上传图片之前判断图片大小及格式
            beforeAvatarUpload(file) {
                console.log(file)
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 / 1024 < 5;
                this.beforeUpload = false;
                if (!isJPG && !isPNG) {
                    this.beforeUpload = true;
                    this.$message.error('上传图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.beforeUpload = true;
                    this.$message.error('上传图片大小不能超过 5MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            // 此处已注释，如果用这个方法上传就会有几张图片调用几次接口
            weiBo: function (response, file, fileList) {
                if (response.retStatus != '1') {
                    this.$message({
                        type: 'error',
                        message: response.retMessage,
                    });
                } else {
                    this.$message({
                        type: "success",
                        message: "上传成功！"
                    })
            }

2、实现图片预览

<ul class="imgbox m-listtable f-pdg-20-t">
                <li v-for="(item,uuid) in srcList" :key="uuid">
                    <el-image 
            style=" 100%;"
             :src="item.signPodPath" 
            :preview-src-list="new_arr">
               </el-image>
          </li>
   </ul>


srcList: [], //用来循环的
new_arr:[]，//用来预览的数组

//获取图片
  getImglist(){
    var that = this
    $.ajax({
       url: 'xxx',
       dataType: "json",
       method: "POST",
       data: {
            "uuid": utils.getQueryString("uuid")
       },
       success: function (ret) {
           if (ret.retStatus == "1") {
               that.srcList = JSON.parse(ret.retData)
               var arr = []
               let result = []
               that.srcList.forEach(item => {
               　　arr = item.signPodPath
                   that.new_arr.push(arr)
               })
              console.log(that.new_arr)
          }
        }
      })
   }