el-upload组件自定义上传无法正常显示本地图片

问题说明

在使用el-upload组件中通常会遇到请求不满足的情况或者需要接受参数，这时候我们就会用到自定义上传。而组件库在使用自定义上传的时候会覆盖默认的上传行为，导致我们不能对一些数据进行处理。

文件转base64

自定义图片上传方法，文件参数信息

使用自定义方法上传时，文件参数信息

除了文件信息，还有一些方法参数

解决

使用自定义方法参数信息中的参数对象

	// 图片上传
    httpUpload (context) {
      // 监听上传成功，执行成功的方法
      context.onSuccess(e => {})
      // 文件转base64，创建文件对象
      var reader = new FileReader()
      // 读取文件为DataURL
      reader.readAsDataURL(context.file)
      // load后，才可获取到文件信息
      reader.onload = (e) => {
        uploadFile({
          'image_base64': e.target.result
        }).then(({ data }) => {
          if (data.code === 200) {
            this.imageUrl = data.data.image_url
          }
        })
      }
      reader.onerror = function (error) {
        console.log('Error: ', error)
      }
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 文件上传成功执行的方法
    handleAvatarSuccess (res, file) {
      this.showImg = URL.createObjectURL(file.raw)
    }