图片上传

结构:

              <el-upload
               :on-success="uploadSuccess"
                action="/common/upload" //上传地址
                :headers="uploadHeaders"//上传请求头
                :file-list="materialEditForm.fileList"
                list-type="picture-card"
                :auto-upload="true"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <!-- 缩略图 -->
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions"> </span>
                </div>
              </el-upload>

import { getToken } from "@/utils/auth";
export default{
data(){
return {
  uploadHeaders: {},//上传图片的请求头信息
  materialEditForm: {//将上传的图片或者文件保存在这个对象中
        fileList: [],//存文件
        prove: [],//存图片
      },
}
},
mounted(){
   if (getToken()) {
      this.uploadHeaders["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
    }
},
methods:{
//图片上传成功的回调
   uploadSuccess(response, file, fileList) {
      this.materialEditForm.prove.push(response.url);
      this.materialEditForm.fileList.push({
        name: "a.png",//给图片起的别名
        url: response.url,
      });
      // console.log(this.materialEditForm.fileList, "response466");
    },
}
}