Element.ui上传图片

Element.ui上传图片

*自己做一下记录给有需要的人用
下面展示一些 内联代码片。

1. headers 这是请求头 一般放入我们的token

<el-upload
        :headers="headers"
        :action="'这里填写后端的地址'"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-upload="getupImage">
              <span>上传图片</span>
</el-upload>
data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
//计算属性 监听这个token 
computed: {
    headers() {
      return {
        token: getcache("token") || "",
      };
    },
  },
//注释  删除图片方法
handleRemove(file, fileList) {
    console.log(file, fileList);
},

// An highlighted block

使用了这些方法大概就可以请求接口 传给服务器了 限制图片大小等一些判断 根据自己实际情况加一下。
写的就是最基本的请求接口上传图片
勿喷勿喷勿喷！！！