记使用element上传文件踩的一次坑

elementUI上传图片官方示例
因为当时要和前端做交互，后台我是用MultipartFile来接收图片数据，发现各种报错。首先前端是报一个跨域的问题，

而java后台也是加上了注解@CrossOrigin(origins = "*", maxAge = 3600)
发现还是一样的问题，但是其他接口却不会显示出现跨域的问题
所以一时之间就非常的懵逼，也是一直去往跨域问题这个方向寻找答案！
找了好久都没找到，问了一大堆的人。。。还是解决不了。在网上疯狂找答案，看到一个是因为在方法里设置了Content-Type，后面要加上form表单一样的一堆数据，简单上图
这是正常表单提交的数据和请求头

以下是前端写出的方法跳转，发现F12查看没有了后面这一段

查看方法

:on-preview="UploadChange" 
UploadChange(file) {
      // console.log(file);
      // this.$axios({
      //   url: "/scm/public/uploadImage",
      //   method: "POST",
      //   headers: {
      //     "Content-Type": "multipart/form-data",
      //   },
      //   data: {
      //     file,
      //     uploadName: "logoImage",
      //   },
      // }).then((res) => {
      //   console.log(res);
      // });
    }

后面自己加上这一段

headers: {
           "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryDo8jAPEDdh2SS5sB",
       }

重新运行，报错400，再看一下数据

前端给我传的是这种数据格式，明显是不对的（后来才明白到:on-preview里面的方法只是展示数据）
后面前端页面直接改成是使用action直接自动上传

<el-upload
//action直接填写你的接口
  action="http://localhost:8090/scm/public/uploadImage" 
              list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>

调用接口成功，当时真的是气抖冷
菜是原罪呀