element-ui自定義上傳圖片

按照element ui官網的說法，http-request 覆蓋原默認的上傳行為，可以自定義上傳的實現。

個人代碼實現如下：

html 部分：

<div class="upload_img">
  <el-upload
    class="avatar-uploader"
    ref="upload_img"
    action=""
    accept="image/jpeg,image/jpg,image/png"
    list-type="picture-card"
    :name="upload_name"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :limit="1"
    :file-list="file_list"
    :http-request="uploadSectionFile">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpeg、jpg、png 格式的圖片，圖片大小在2M以內。</div>
  </el-upload>
</div>

methods里面的方法

file_list:[   //展示已上傳的圖片數據  【修改時用的】
    // {
    //   name: '01',
    //   url: 'http://voucher-backend.frgiftcube.com:80/upload/2019/07/31/1847366e138ac779a7c5bd229b65a2d4e130a1e5.jpg'
    // }
],
upload_name: 'files',//圖片上傳的后端接受圖片文件的 key
dialogImageUrl: '',  //上傳后的圖片地址

methods里面的方法：

//文件超出個數限制時的鈎子【判斷上傳的圖片是否超過限制，超過提醒刪除再進行上傳】
handleExceed: function () {
  this.$alert('圖片最多上傳一張，請刪除再重新上傳！', '', {
    showConfirmButton: false,
    callback: action => {}
  });
},
// 文件列表移除文件時的鈎子
handleRemove: function (file, fileList) {  
  console.log(file, fileList);
  this.dialogImageUrl='';
},
uploadSectionFile: function (params) {
  // 自定義上傳方法
  // console.log(params);
  var that = this,
  file = params.file,  //獲取上傳的文件
  fileType = file.type,   //獲取文件類型
  isImage = fileType.indexOf('image') != -1,  // 判斷是否是圖片類型
  file_url = that.$refs.upload_img.uploadFiles[0].url;
  // console.log(file,fileType,isImage,file_url,that.$refs.upload_img);
  var isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {  // 判斷大小
    alert("上傳圖片的大小不能超過 2MB!");
    that.$refs.upload_img.uploadFiles = [];  //不符合就清空已選擇的圖片
    return;
  }
  if(!isImage){  // 文件格式
    alert("請選擇圖片文件！");
    that.$refs.upload_img.uploadFiles = [];   //不符合就清空已選擇的圖片
    return;
  }
  if (isImage) {
    var img = new Image();
    img.src = file_url;
    img.onload = function () {
　　　 //  一切驗證通過后調用上傳方法
      that.uploadFile(file);
    }
  }
},
uploadFile: function (file) {   // 上傳的函數
  var that = this,
  formData = new FormData();
  formData.append(that.upload_name, file);
  this.$axios.post("/file/upload", formData, { headers: { 'Content-Type': 'multipart/form-data' } })

    .then(function (res) {
      // console.log(res);
      if(res.data.status == 0){  //成功的話將數據插入data中
        that.dialogImageUrl = res.data.data.img;
        that.file_list[0]={name: '01', url: res.data.data.img};
        // that.file_list[0]=res.data.data.img;
      }else{
        // 上傳失敗，清除已選擇 內容 ，並提示失敗原因
        that.$refs.upload_img.uploadFiles = [];
        that.file_list[0]='';
        that.$alert('圖片上傳異常，原因：'+res.data.data, '', {
          showConfirmButton: false,
          callback: action => {}
        });
      }
    })
},

很多時候我們做了上傳圖片到后端：但是在修改時獲取后端的圖片時要顯示在頁面
只需將地址復制到 file_list 即可。 代碼如下：

this.file_list=[
  {
    name: '01',
    url: '后端返回的圖片地址'
  }
]

對應 html 寫的 :file-list