本文详细介绍了如何在Vue项目中利用Element-UI的Upload组件实现文件上传，特别是针对手动异步上传和表单数据配合的情况。在理解不同POST请求编码格式后，通过设置auto-upload及监听on-success事件，确保文件上传成功后再提交表单数据，解决了文件和表单数据同步提交的问题。最后，提到了accept属性用于限制上传文件类型，并提供了在线工具资源。
vue之element-ui文件上传
文件上传需求
对于文件上传，实际项目中我们的需求一般分两种：
对于单个的文件上传，比如拖动上传个图片之类的，或者是文件。
和表单一起实现上传(这种情况一般都是文件上传之后，后端返回保存在服务器的文件名，最后和我们的表单一起上传)
对于第一种情况，通过看api就很明了。
对于第二种情况，我们需要考虑一个问题就是手动异步上传，后面会具体说明一下，您耐心往下看...
识别几种文件上传格式
在上传文件之前，我们需要了解我们前端在请求数据的时候，几种格式的区别。因为前后的格式不统一，就会导致我们的上传失败，毕竟踩坑了，真的。
1.application/x-www-form-urlencoded
最常见的post提交编码格式，一般的表单提交默认以此方式，具体的请求格式看下面：
2.multipart/form-data
这个比较常见的post提交方式，我们通常是在文件上传的时候使用。形式特别好认，一长串的字符...
3.application/json
使用vue现在我们用的服务都是axios，(vue-resource论坛里不更新了)，axios默认的提交就是用的这种方式
json就不截图了，只要是我们一般的请求，都基本是json格式，肯定早就清楚了。
具体
最低0.47元/天 解锁文章
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
