vue 开发批量上传图片及自定义

系统管理员 2021-07-25 16:28 362阅读 0赞

## 批量上传图片 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
最近在开发后台管理系统时，遇到一个需求：本来已经实现了单张图片的上传，目前要在此基础上添加批量上传图片的功能：

为了保证效果一致，我还是用一个函数进行处理：

#### html代码部分 ####

<el-form-item label="代理证书" :prop="supplierObj.type=='2'?'AgentCertificateUrls':''" v-if="supplierObj.type=='2'" ref="daili">  //判断条件不用管，是特殊需求，与此文章介绍的功能无关
       <div style="display:flex;flex-wrap:wrap;">
           <div v-for="(photo,pIndex) in supplierObj.agentCertificateUrls" :key="photo" style="display:flex;flex-wrap:wrap;">
               <div class="imgWrap" v-on:mouseenter="isShow=photo" v-on:mouseleave="mouseleave" style="margin-bottom:20px;">
                   <span class="shade" v-if="photo&&isShow==photo">
                       <i class="el-icon-delete" v-on:click.stop="delImg(pIndex,'agentCertificateUrls')" v-if="!disabled">  删除</i>
                       <i class="el-icon-zoom-in" v-on:click.stop="bosst(photo)">  预览</i>
                   </span>
                   <img v-if="photo" :src="photo" alt="代理证书" style="width:100%" />
                   <i v-else class="el-icon-plus el-icon--right" style="font-size:20px;" v-on:click="addImg(1)"></i>
               </div>
           </div>
           <div class="imgWrap">
               <i class="el-icon-plus el-icon--right" style="font-size:20px;" v-on:click="addImg(1)"></i>
           </div>
       </div>
       <div style="display:flex;flex-wrap:wrap;">
           <div v-for="(time,tIndex) in agentCertificateEndTimes" style="margin-right:10px;">
               <el-date-picker :key="tIndex" v-model="time.value" type="date" placeholder="选择代理证书结束时间" style="width:180px;" size="mini" :disabled="disabled" clearable></el-date-picker>
           </div>
       </div>
       <el-button :loading="btnLoading1" type="primary" size="mini" v-on:click="addImg(1)" plain :disabled="disabled">上传图片</el-button>
       <span>图片仅支持jpeg/jpg/gif/png格式，大小不超过5M</span>
    </el-form-item>

鼠标移入时，需要可以对图片进行删除或者预览：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
特别需要注意的地方：

上传一张图片后，下方要出现对应的时间选择框，因此图片的数量与时间数组要对应,原始的代码如下：

`supplierObj.agentCertificateEndTimes`:`['2021-4-26','2021-3-26']`，此时的time是一个个的字符串  
执行上面的代码时，其实是报错的：

v-for遍历图片数组时，需要给`date-picker`绑定数值用于数据回填，此时相当于是给v-model绑定一个time，结果报错了，提示不能给v-model绑定time变量，解决办法就是重新定一个变量，然后将每一项都由原来的字符串改为对象，然后通过v-model绑定对象的value值，代码如下：

addImg()添加图片时，会调用一个函数，将Input 组件显示出来：上传图片我没有使用element-ui中的uploadFile，而是用的是`input`，当`input`组件`type="file"`时，会显示添加图片的界面：

//上传图片部分
     <div style="opacity: 0">
        <input v-if="imgInput"
               ref="imgUpload"
               multiple
               style="width: 0px; height: 0px"
               type="file"
               v-on:change="changeImg($event)" />
    </div>
    //预览部分
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img style="width:100%;" :src="dialogImg" />
        </el-dialog>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

#### javascript部分 ####

//添加图片函数，此时将input组件(type="file")显示出来，进行图片的上传
    addImg(n) { 
      this.n = n;
      this.imgInput = true;
      this.$nextTick(() => { //页面渲染完成后，执行该组件的click方法，如果选择了图片则会执行changeImg函数
          this.$refs.imgUpload.click();
      });
    },
    //选择图片后的上传函数
    changeImg(file) { 
      var files = file.target.files;
      if (!files.length) { 
          return;
      }
      for (var m = 0; m < files.length; m++) { //遍历，对图片的格式进行校验
          if (files[m].type === "image/jpeg" || files[m].type === "image/jpg" || files[m].type === "image/gif" || files[m].type === "image/png") {  console.log("格式正确"); } else { 
              this.$message.error("文件格式错误！");
              return;
          }
          const isLt5M = files[m].size / 1024 / 1024 < 5;//对图片的大小进行校验
          if (!isLt5M) { 
              this.$message.error("上传图片大小不能超过 5MB!");
              return;
          }
          //将本地的图片上传到阿里oss存储器，然后返回一个线上的链接，将此链接保存下来，用于整体数据的提交
          var formData = new FormData();//formData的格式处理图片数据
          formData.append('UpImgFiles', files[m])//上传图片的接口要求字段名为：UpImgFiles，而且属性值为二进制形式
          formData.append('type', 0)//type也是上传图片的接口要求的属性名
          if (this.n == 0) { 
              this.btnLoading0 = true;//上传图片的过程中为了防止用户重复点击，做了一个节流
              this.$refs.yingye.clearValidate();//这个是为了清除图片校验，如果图片必传，点击提交时，会提示图片必传，上传图片后，"图片必传"的提示并不会自动消失，此时可以手动清除一下，不用也可以。
          } else if (this.n == 1) { 
              this.btnLoading1 = true;
              this.$refs.daili.clearValidate();
          } else if (this.n == 2) { 
              this.btnLoading2 = true;
              this.$refs.tixi.clearValidate();
          } else if (this.n == 3) { 
              this.btnLoading3 = true;
              this.$refs.kehu.clearValidate();
          } else if (this.n == 4) { 
              this.btnLoading4 = true;
              this.$refs.gouwu.clearValidate();
          }
          $.ajax({ 
              type: 'post',
              url: "/SysArea/Supplier/UpFile",
              data: formData,
              cache: false,
              processData: false,
              contentType: false,
          }).success(data => { 
              if (data.Code == 200) { 
                  if (this.n == 0) { 
                      this.btnLoading0 = false;
                      this.supplierObj.businessLicenseUrl = data.Data;
                      this.$set(this.supplierObj, 'businessLicenseUrl', data.Data);
                  } else if (this.n == 1) { 
                      this.btnLoading1 = false;//多个图片的上传，将返回的图片链接push到对应的字段中
                      this.supplierObj.agentCertificateUrls.push(data.Data);
                      this.agentCertificateEndTimes.push({  value: "" });//图片上传后，对应的时间数组也要添加一条
                      this.$set(this.supplierObj, 'agentCertificateUrls', this.supplierObj.agentCertificateUrls);
                  } else if (this.n == 2) { 
                      this.btnLoading2 = false;
                      this.supplierObj.certificateUrl = data.Data;
                      this.$set(this.supplierObj, 'certificateUrl', data.Data);
                  } else if (this.n == 3) { 
                      this.btnLoading3 = false;
                      this.supplierObj.authorizationUrl = data.Data;
                      this.$set(this.supplierObj, 'authorizationUrl', data.Data);
                  } else { 
                      this.btnLoading4 = false;
                      this.supplierObj.transactionUrls.push(data.Data);
                      this.$set(this.supplierObj, 'transactionUrls', this.supplierObj.transactionUrls);
                  }
              }
          }).error(() => { 
              this.$message.error('上传图片异常');
              return;
          });
      }
    },
    mouseleave() { 
      this.isShow = -1;
    },
    delImg(name,arrName) { 
      if (this.disabled) { 
          return;
      }
      if (arrName) { //删除图片后，对应的时间也要删除
          this.supplierObj[arrName].splice(name, 1);
          if (arrName == 'agentCertificateUrls') { 
              this.agentCertificateEndTimes.splice(name,1);
          }
      } else { 
          this.supplierObj[name] = null;
      }
    },
    bosst(url) { 
      this.dialogVisible = true;
      this.dialogImg = url;
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/aeccc1a9418a47049b7104e39a6dbdda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/f7e10bdd943340e2a722069a02961a78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/e7a499aca6bd44b8b07d0bb1aaf8fc15.png