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>

data里面保存的数据：

    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) { 
    this.dialogImageUrl='';
  },
  // 这个方法主要对图片的类型和大小进行一个判断
  uploadSectionFile: function (params) {
    // 自定义上传方法
    var that = this,
    file = params.file,   //获取上传的文件
    fileType = file.type,   //获取文件类型
    isImage = fileType.indexOf('image') != -1,  //  判断是否是图片类型
    file_url = that.$refs.upload_img.uploadFiles[0].url;
    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