关于element图片上传

1. 采用 :http-request="" 自定义上传的方式

<el-upload
  action=""
  list-type="picture-card"
  :file-list="fileList"
  :http-request="httpRequest"
  :on-success="handleSuccess"
  :on-remove="handleRemove"
>
  <i class="el-icon-plus"></i>
</el-upload>

data() {
	return {
	   //上传图片
      imgList: [], //对应的每张图片
      fileList: [], //上传图片回显数组
	}
}

//实现图片上传功能
httpRequest(item) {
  var imgId = item.file.lastModified
  var formData = new FormData()
  formData.append('file', item.file)
  this.$http
    .post('/oss/file/upload', formData, {
      // 设置请求头为 multipart/form-data
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      // 上传进度
      onUploadProgress: progressEvent => {
        let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
        //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
        item.onProgress({ percent: percent })
      }
    })
    .then(res => {
      res = res.data
      if(res.code == 500) return this.$message.error(res.msg)
      var array = []
      var imgId = []
      array.push({
      	ossId: res.data.ossId,
      	imgId
      })
      imgId.push(res.data.ossId)
      this.imgList = array
      this.dataForm.ossIdList = imgId
      item.onSuccess() //上传成功(打钩的小图标)
    })
    .catch(() => {})
},

2. 删除上传的图片

//删除图片时重新处理表单
handleRemove(file, fileList) {
  var list = this.imgList
  for (var i = 0; i < list.length; i++) {
    if (list[i].imgId) {
      if (list[i].imgId == file.raw.lastModified) {
        list.splice(i, 1)
      }
    }
    if (list[i].url) {
      if (list[i].url == file.url) {
        list.splice(i, 1)
      }
    }
    this.dataForm.ossIdList.push(list[i].ossId)
  }
},

3. 关于图片回显

getInfo() { // 此方法获取详情
   this.fileList = []
   this.$http
     .get(`/pipenetwork/device/detail/${this.dataForm.id}`)
     .then(({ data: res }) => {
       if (res.code !== 0) return this.$message.error(res.msg)
       this.dataForm = res.data
       // 获取的图片信息
       var list = res.data.picUrlList
       if (list) {
         for (var i = 0; i < list.length; i++) {
           this.fileList.push({ url: list[i].url })
           this.dataForm.ossIdList.push(list[i].ossId)
           this.imgList.push({
             ossId: list[i].ossId,
             url: list[i].url
           })
         }
       }
     })
     .catch(() => {})
 },