element-ui处理图片

**

工作中遇到用Element-ui来做图片展示处理，记录一下

**

  <el-form-item id="cpic" label="竞业协议照片" style="min-width: 1000px" v-if="!isEdit">
    <el-upload
	   ref="uploadCompetitionPics"
	       :limit="10"
	       :http-request="uploadFunc"
	       multiple list-type="picture-card"
	       :on-remove="handleRemove"
	       :on-preview="handelPreview"
	     >
      <i class="el-icon-plus"></i>
     </el-upload>
     <el-dialog v-model="dialogVisible" title="图片预览">
       <img :src="dialogImageUrl" alt="" style="width: 100%">
     </el-dialog>
   </el-form-item>
    // 竞业协议
    uploadFunc (info) {
      const { file } = info;
      const formData = new FormData();
      formData.append('file', file, file.name);
      uploadFile(formData).then((res) => {
        this.newcomer.competitionPics.push(res);
      }, (err) => {
        this.$message({
          type: 'error',
          message: `文件 ${file.name} 上传失败：${err.errmsg}`,
        })
        console.error(err);
      });
    },
    handleRemove (file) {
      const fileName = file.name;
      const index = this.newcomer.competitionPics.findIndex(item => item.fileName === fileName);
      this.newcomer.competitionPics.splice(index, 1);
    },
    handelPreview (file) {
      this.newcomer.competitionPics.forEach(item => {
        if (item.fileName === file.name) {
          this.dialogImageUrl = item.url;
        }
      })
      this.dialogVisible = true;
    },