element-ui 上传图片

element-ui 上传图片

action 上传地址

list-type 圆框上传图标框

headers 请求头 Authorization配置获取token

on-success 有三个参数response, file, fileList 里面有上传完成后的地址和生成的id

 <el-upload
  action="https://meituan.thexxdd.cn/apit/uploadres"
  list-type="picture-card"
  :headers="headersToken"
  :on-success="successFn"
>
  <i class="el-icon-plus"></i>
</el-upload>
<!-- dialogImageUrl 显示的图片 回显图 -->
<el-dialog :visible.sync="dialogIMgible">
  <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

 // 上传完成返回的结果 服务器的图片地址
successFn(response, file, fileList) {
  // 上传图片处理
  this.formBty = {
    ...this.form,
    image: {
      uid: file.uid,
      status: file.status,
      url: file.response.data,
    },
  };
  console.log(this.formBty);
},

配置data数据

最后根据自己的后端接口配置数据将获取到的上传到后端接口就可以实现上传图片的功能了。