vue中使用elmentUI的Upload组件提交文件和后台接收

1.参考此博客，希望有以下知识储备

vue的路由，跨域请求，springboot2.X，html，已经阅读elementUI官网中关于upload组件的详细介绍。

2.废话不多说，直接讲解细节。

前台使用webstorm搭建的vue工程:访问地址使用  http://localhost:8080

 

后台用的idea写的控制层: 访问地址使用  http://localhost:8081

 

 

前台：我是直接copy   elementUI官网的样例，我放在了新建的Upload.vue文件中

==============================================================================================================================





======================================================================================================================

action="/data/upload" 根据自己后台实际RequestMapping书写，之所以我不写全，是因为下面那个图片，请求地址会自动补全为http://localhost:8081/data/upload

:on-change="changeMe" 这个不用管，是我自己做的测试
name="file" 名字任意，为了后台数据的接收

配置前端路由，如何请求后台

 后端代码如下：

这样就可以接收到前台传来的文件了。如果报

Spring Boot:The field file exceeds its maximum permitted size of 1048576 bytes.

可以参考https://blog.csdn.net/u010429286/article/details/54381705

正常如果能上传就会看到调试窗口的这个内容

很多网上使用设置headers为mutipart/form-data，在此我重申一下，没有必要。elementUI已经封装加工过了。比用再多此一举去设置。

你如果设置了，你会报错boundry什么，我忘记了。所以说不用去设置。

转载于:https://www.cnblogs.com/fanjunhui/p/11307837.html