项目是前后端分离的，后端是springboot+前端vue

前端通过vue-cli在index.js配置了nginx正向代理解决跨域问题。

在插件上传时，使用了el-upload组件，遇到了一些小问题。

官方文档上说action属性要设置为上传地址，所以傻傻的以为是上传的文件要储存的文件夹路径，但其实action要设置为后端的api接口地址。action要设置为后端的api接口地址，action要设置为后端的api接口地址，action要设置为后端的api接口地址，重要的事情说三遍。设置为存储文件夹地址会报404的错误，捂脸。

所以应该写

<el-upload :action="uploadAPI" ref="upload">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

在data中设置uploadAPI=“/api/uploadFile”，/api/uploadFile就是后台接口的API地址，与后端商定一致即可。所以上传文件的过程是是前端action写后端接口，通过this.$refs.upload.submit()发送请求，这中间el-upload已经设定好了传输的文件格式，能够被后端正确的接收和解析，后端在接受函数中，接受解析文件信息，如名称大小内容，然后设定存储文件夹的路径。

这个链接写的很清晰https://blog.csdn.net/qq_40903237/article/details/101207167

但是我试了一下前端:name设置的字段跟后端不一致的情况也能上传成功。

还可能遇到的问题是，大家想着在上传按钮上手动绑定上传函数，参数是new FormData(),这种方式可能导致浏览器返回200，但是后台接受不到传输的文件。