vue 附件上传el-upload

废话不多说，直接上代码

<el-upload multiple action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange"
					    :on-exceed="(fileList)=>{this.$message({type:'warning' , message : '已选数量超出上传限制，请重新选择'})}"
					    accept=".jpg,.jpeg,.png,.bmp"
					    :auto-upload="false" :file-list="fileList" :limit="3" 
					    :class="fileList && fileList.length >= 3 ? 'hide' : 'show'">
					    <i class="el-icon-plus"></i>
					  </el-upload>

预览用el-image

<div class="demo-image__preview" style="width: 80px;height: 80px;" >
		  <el-image style="width: 80px;height: 80px;"  ref="previewImg" :preview-src-list="imageUrlList" :src="imageUrl"></el-image>
		</div>

字段定义

confirmForm: {
					beizhu: '',
					mortgage_file: [],
				},

				fileList: [],
				imageUrlList: [],
				imageUrl: "",

附件图片上传

// 上传
			handleChange(file, fileList) {
			  const isJPG = file.raw.type.indexOf("image") >= 0;
			  const isLt3M = file.raw.size / 1024 / 1024 < 3;
			  
			  this.fileList = fileList;
			  if (!isJPG) {
				  this.fileList.forEach((item, index) => {
				    if (item.name == file.name) {
				      this.fileList.splice(index, 1)
				    }
				  })
			    return this.$message.error("只能上传图片");
			  }
			  if (!isLt3M) {
				  this.fileList.forEach((item, index) => {
				    if (item.name == file.name) {
				      this.fileList.splice(index, 1)
				    }
				  })
			    return this.$message.error("图片大小不能超过 3MB!");
			  }
			  
			  const form = new FormData();
			  form.append("img", file.raw);
			  let env = process.env.VUE_APP_MODE;
			  if (env == "development") {
			    form.append(
			      "secret_key",
			      "cLHasoJRXgR2TaQWbzUEzfCzl5y0qyiw16YZxV9x1tPGa7tpFUafETcLVBEkOWDo"
			    );
			    form.append("phone", process.env.VUE_APP_IPHONE);
			    form.append("password", process.env.VUE_APP_PASSWORD);
			  }
			  this.$post("/upload.php", form)
			    .then((res) => {
			      if (res.data.code == 200) {
			        this.imageUrl = res.data.file_path;
					const temp = {};
					temp.file_name = res.data.file_name;
					temp.file_path = res.data.file_path;
					temp.file_size = res.data.file_size;
					temp.file_ext = res.data.file_ext;
					this.confirmForm.mortgage_file.push(temp);
			      }
			    })
			    .catch((err) => {});
			},

预览

handlePictureCardPreview(file) {
			  console.log(file)	
			  this.imageUrl = file.url;
			  this.fileList.forEach(item => {
			    this.imageUrlList.push(item.url)
			  })
			  this.$refs.previewImg.showViewer = true;
			},

删除

handleRemove(file) {
			  this.imageUrl = "";
			  // 1.获取将要删除图片的临时路径
			  const filePath = file.file_path
			  // 2.从pics数组中，找到图片对应的索引值
			  const i = this.confirmForm.mortgage_file.findIndex(x => x.file_path === filePath)
			  // 3.调用splice方法，移除图片信息
			   setTimeout(() => {
			      this.confirmForm.mortgage_file.splice(i, 1)
			      	  this.fileList.splice(i, 1)
			    }, 1000);
			  console.log(this.confirmForm.mortgage_file)
			},

css

/deep/ .el-upload--picture-card{
		width: 80px !important;
		height: 80px !important;
		line-height: 80px !important;
	}
	
	/deep/ .el-upload-list--picture-card .el-upload-list__item{
		width: 80px !important;
		height: 80px !important;
		line-height: 80px !important;
	}
	
	/deep/ .el-form-item__error{
		left: 46px !important;
	}
	
	.hide   {
	  /* position: relative; */
	 /* padding-top: 20px;
	  padding-left: 23px; */
	  ::v-deep {
	    .el-upload--picture-card {
	      display: none;
	    }
	 
	    /* .el-upload-list__item {
	      border: 0;
	      border-radius: 0;
	      margin:0 36px 0 0;
	    } */
	  }
	}

以上完事