vue element-ui 图片上传/预览/删除功能

「爱情、让人受尽委屈。」 2021-07-26 02:12 2507阅读 0赞

## element-ui 图片上传功能 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
下面就详细介绍一下关于图片的这几个功能。

页面代码如下：

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

<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);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/d2dea4b253654a9b8f0da4ddada70a0e.png