vue+element-ui 上传图片时回显不成功，报这种错误是怎么回事

Question

vue+element-ui 上传图片时回显不成功，报这种错误是怎么回事？🤔

Answer 1

这个错误通常是由于浏览器不支持或不兼容createObjectURL方法导致的。你可以尝试使用其他方法来处理你的数据，例如使用Blob对象或FileReader对象来读取和处理文件。
下面是服务端响应图片地址是http的形式的案例。

1. 在上传组件中添加 show-file-list 属性，用于显示已上传的文件列表。

<el-upload
  class="upload-demo"
  action="/upload"
  :show-file-list="true"
  :on-success="handleSuccess"
  :before-upload="beforeUpload">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

2， 在 handleSuccess 方法中，将上传成功后的图片地址保存到 imageUrl 变量中。

data() {
  return {
    imageUrl: ''
  }
},
methods: {
  handleSuccess(response, file, fileList) {
    this.imageUrl = response.data.url
  }
}

3， 在模板中使用 v-if 判断 imageUrl 是否为空，如果不为空则显示图片。

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :show-file-list="true"
      :on-success="handleSuccess"
      :before-upload="beforeUpload">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <div v-if="imageUrl">
      <img :src="imageUrl" alt="上传的图片">
    </div>
  </div>
</template>

这样就可以实现图片上传后的回显了。