vue如何优雅的上传文件 上传文件的方式1.表单提交文件2.Elementui封装的组件提交文件
上传文件的方式
下面是我使用过得两种提交方式，就详细说一下哈
1.表单提交文件
2.Elementui封装的组件提交文件
html页面：
为了页面美观，就把form表单的隐藏啦，用了elementui的按钮触发事件。
<el-button @click="getFile" style="margin-top: 10px"> <i class="el-icon-upload"></i> {{$i18n.t('CLICK_UPLOAD')}}</el-button><input type="file" ref="file" style="display: none;" v-on:change="handleFileUpload($event)">提交方法：
重点就是要转成FormData格式啦
methods里的完整代码：
axios请求：
os请求都是封装好的，重点就是需要加请求头： headers：{ ‘Content-Type’: ‘multipart/form-data’ }
// 文件上传export function postUpload (file) { return axios({ url: 'upload', method: 'post', data: file, headers: { 'Content-Type': 'multipart/form-data' } })}处理好FormData和headers，就和普通接口无异啦
2.Elementui封装的组件提交文件html页面：
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :http-request="onUpload"> <el-button size="small" type="primary">点击上传</el-button></el-upload>格式判断什么的都在后端写了，前端就单纯上传文件，就没有其他花里胡哨的啦。
action是组件自带，是自动上传得，（但是action是必需得，不使用，为空就好）需要手动上传使用http-request，可自定义事件
官方文档的属性解释说明：
提交方法：
// 上传文件onUpload (file) { let formData = new FormData() formData.append('file',file.file) postUpload(formData).then((res) => { console.log(res) this.$message.success(this.$t('UPLOAD_SUCCESS')) }).catch((e) => { this.$message.error(e.message) })},axios请求：
// 文件上传export function postUpload (file) { return axios({ url: 'upload', method: 'post', data: file, headers: { 'Content-Type': 'multipart/form-data' } })}如果这篇博客还是无法解决你的问题，那
（哈哈哈）
如果还是无法解决你的问题或者还有哪儿不明白，下面整理了一些写得很nice的文章链接：
form表单上传文件： https://www.cnblogs.com/rxbook/p/11966054.html
Element el-upload上传组件详解：https://www.jianshu.com/p/84b727a4b58a
附加俺得另一篇博客（压缩图片上传）：【vue项目使用elementui 上传图片（自动上传和手动上传） 并压缩图片】
最最后安利一个宝藏公众号：【缘有言故】
你以为这是一个IT类干货公众号？？
当然不是
这是一个温暖治愈向的情感类公众号。
关注公众号即可获得【英语四六级】，【PS】，【新媒体】等干货哟，
公众号也一直在征稿哦，关注公众号，回复【征稿】即可获得详细的征稿信息，稿费客观哦！！