el-upload组件上传文件失败浏览器200但是后端接收不到file

最新推荐文章于 2025-03-13 19:07:50 发布

原创最新推荐文章于 2025-03-13 19:07:50 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细讲解了在Vue项目中使用el-upload组件上传文件的正确方式，强调了action属性应设置为后端API接口地址而非文件存储路径，避免404错误。同时，分享了与后端接口正确对接的经验，包括数据格式、字段匹配等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目是前后端分离的，后端是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.youkuaiyun.com/qq_40903237/article/details/101207167

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

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