前端上传图片，借助el-upload组件，当然，也涉及后端接口，我这儿就说前端实现。

效果图如下：

2.png

1.png

前端代码：

  // html
<el-upload
       list-type="picture-card"
       :http-request="onImport"
       :show-file-list="false"
        accept="'png', 'jpeg', 'jpg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'"
    >
    <img
        v-if="imageUrl"
        :src="imageUrl"
        class="avatar"
        style="width: 100%; height: 100%"
    />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

// accept: 上传文件类型
// list-type: 文件列表的类型
// http-request: 覆盖默认的上传行为，可以自定义上传的实现
// show-file-list: 是否显示已上传文件列表，如果为true，可以显示一个列表，为false就不显示，因为这儿我的需求是上传一张图片，然后借助img标签实现回显

这儿我上传图片是采用 表单格式 提交：

  // methods
onImport({ file }) {
  let form = new FormData()
   form.append('file', file)
   this.$api.uploadFile(form).then((res) => {
   let { code, data } = res
   if (code == 200) {
      this.$message.success('上传成功')
      this.imageUrl = data
      // this.$emit('success')
    } else {
      this.$message.error('上传失败')
    }
  })
},
// form定义一个表单用来做表单上传的参数，对需要的字段采用append添加
// uploadFile这就是上传方法(需要和后端进行对接)，返回的字段中，data是图片的回显地址

如有错误，欢迎指正