el-upload 上传文件为空和action踩坑

写自己项目的时候，用gitee做了个图床，大概就是前端上传图片，转成base64存进图床，返回图片地址，具体做的时候在前端上传文件这里出现了小坑，记录下。

尝试一

在使用ElementUI上传组件的时候，使用组件自带的action的时候，浏览器出现跨域的问题，虽然是前后端分离的项目，但是明明其他接口就可以正常访问后端，搜索了网上的方法没解决。

<el-form-item label="封面(大)">
    <el-upload
               name="file"
               class="avatar-uploader"
               action="#"
               :show-file-list="false"
               :http-request="imageUpload"
               :on-change="imageUpload"
               :before-upload="beforeAvatarUpload">
        <img ref="ss" v-if="game.largeCover" :src="game.largeCover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</el-form-item>
</el-col>

尝试二

然后我就使用了http-request屏蔽掉默认的action自己写请求

imageUpload(file){
  console.log(file)
  const formData = new FormData()
  formData.append("file",file)
  this.axios.post('/upload',formData).then((res)=>{
    console.log(res)
  })
}

但是这样也出现了问题，文件貌似一直是空的，只能获得一些文件信息，但是data是undefined，可能我的formData那里写的有问题。

尝试三（解决）

试了好久，后来我感觉还是得用action，最后看到一个博客找到了思路

Element-UI中上传的action地址相对问题_liushan633的博客-CSDN博客

和我情况基本一样，在他的思路下，在data中加了两个字段，这样就可以解决跨域的问题，成功上传了文件。但是不明白，为什么拼接出的action就可以，action直接写localhost:8000/upload就不行。

弄了一天，好在解决了，不得不吐槽一下，csdn全是你抄我我抄你，百度搜索看的全是重复的博客，看的我想吐，还是谷歌搜索舒服点。

<el-col  :span="5">
  <el-form-item label="封面(中)">
    <el-upload
        class="avatar-uploader"
        :action="url+uploadUrl"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="game.middleCover" :src="game.middleCover" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </el-form-item>
</el-col>

url:this.axios.defaults.baseURL,
uploadUrl:'/upload',