element-ui 图片上传功能

element-ui中进行图片或者视频的上传是一个比较常见的功能。
如下所示的页面中，点击上传按钮可以进行图片的上传。
上传完成后的图片，当鼠标滑过时，可以进行图片的删除和预览功能的实现。

下面就详细介绍一下关于图片的这几个功能。

页面代码如下：

分界线与上传按钮部分代码

<el-divider content-position="left">
  合同照片
  <el-button v-loading="loading" type="primary" @click="chooseImg('hetong')">上传</el-button>
</el-divider>

合同图片遍历部分代码

// v-for循环遍历   position:relative;将图片变为相对定位，为了展示鼠标滑过的蒙层展示
// 鼠标滑过与移出的方法通过  mouseenter  mouseleave两个函数来处理，isShow用来控制蒙层的展示与隐藏
<div v-for="(itemi,indexi) in hetongImg" :key="indexi" style="margin-right: 10px;position: relative;"
  @mouseenter="isShow = indexi" @mouseleave="isShow = -1">
  <span v-show="isShow === indexi" v-if="$route.query.status != 1" class="shade">
    <i class="el-icon-delete" @click.stop="del(indexi)" />
    <i class="el-icon-zoom-in" @click.stop="bosst(itemi.url||itemi)" />
  </span>
  // el-dialog是一个弹窗，用于预览图片所示，appent-to-body是 dialog内部嵌套另一个dialog时需要用到的。
  // 如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
    <img width="100%" :src="preImg" alt />
  </el-dialog>
  // 这个Img是展示合同图片的标签。
  <img style="width:200px;" :src="itemi.url||itemi" />
</div>

chooseImg方法

chooseImg(type) {
  this.imgInput = true;
  this.type = type;
  // this.$nextTick方法可以触发一个函数，this.$refs.imgUpload.click()就是点击imgUpload这个标签。
  this.$nextTick(() => {
    this.$refs.imgUpload.click();
  });
}

imgUpload元素的写法

<div style="opacity: 0;">
//input 标签，multiple支持多选  type="file"点击可以进行文件的上传  
  <input v-if="imgInput" ref="imgUpload" multiple style="width: 0px;height: 0px;" type="file" @change="changeImg($event)" />
  // 如果在函数中，想要把当前事件传递过去，则可以通过$event的方式进行传递
</div>

changeImg方法部分代码

changeImg(file) {
  this.imgInput = false;
  for (let i = 0; i < file.target.files.length; i++) {
    this.pushFile(file.target.files[i], i, file, this.type);
  }
}

pushFile方法部分代码

async pushFile(files, index, file, type) {
   const self = this;
   if (files.type === "image/jpeg" || files.type === "video/mp4" || files.type === "image/gif" || files.type === "image/png") { console.log("格式正确"); } else {
     this.$message.error("文件格式错误！");
     return;
   }
   const isLt2M = files.size / 1024 / 1024 < 2;
   if (files.type !== "video/mp4" && !isLt2M) {
     this.$message.error("上传图片大小不能超过 2MB!");
     return;
   }
   if (type === "hetong") {
     this.loading = true;
   }
   //  下面的代码是将图片上传到阿里OSS服务器，然后返回一个网络图片地址
   const { result } = await getOssToken();
   let point = files.name.lastIndexOf(".");
   let suffix = files.name.substr(point);
   let fileName = files.name.substr(0, point);
   let date = Date.parse(new Date());
   let fileNames = `goods/${fileName}_${date}${suffix}`;
   client(result).put(fileNames, files).then(result => {
     // 下面是如果对返回结果再进行处理，根据项目需要
     if (result.res && result.res.status === 200) {
       console.log(result);
       result.url = result.url.replace("http:", "https:");
       result.index = index + this.hetongImg.length;
       console.log("返回后的数据", result);
       console.log(type);
       if (type === "bank") {
         self.$set(self.oneLevelForm, "idCardBank", result.url);
       } else if (type === "front") {
         self.$set(self.oneLevelForm, "idCardFront", result.url);
       } else {
         self.hetongImg.push(result);
       }
       setTimeout(function () {
         self.loading = false;
       }, 500);
     }
   }).catch(err => {
     self.loading = false;
     self.$message.error("上传失败");
   });
 }

删除图片与预览图片

bosst(url) {
  this.preImg = url;
  this.dialogVisible = true;
},
del(index) {
  this.hetongImg.splice(index, 1);
}