脚本宝典收集整理的这篇文章主要介绍了Vue使用formData格式类型上传文件的示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
在vue中，我们普遍是前后端分离项目，即需要使用axios等工具向后台发送请求实现对数据的操作。
其中，文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。
1.如图片上传，后端需要前端传formData类型数据的情况下
<el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data" style="display:none;" accept="image/jpeg,image/png,image/gif">
我们使用原生input的方式来实现。
uploadFile2(){
// 当点击button按钮后会触发此事件
// 作用就是打开文件上传弹框
this.$refs.uploadFile2.click()
},
fileValueChange2(){
// 选中文件后，会触发input的change事件，即会进入此函数
var formData = new FormData()
// this.$refs.uploadFile2是vue中获取dom元素的方法
// 通过files就可以拿到所有上传的文件，如果是多个文件循环即可
formData.append( 'file',this.$refs.uploadFile2.files[0])
// 必须设置请求类型
formData.append( 'type', "head");
// 如果需要传id的情况下，参考下面代码
formData.append( 'id', this.id);
// 配置完成后，只需要向后台传入formData 变量即可
insertNavigationUpload(formData).then(res=>{
console.log（'简单吗？老铁'）
})
},
差点忘记一步,axios请求二次封装我就不多说了，这里只展示下接口
export const tMessageNotification = data =>{
return request({
url:'/tMessageNotification/upload',
method: 'POST',
data,
headers: {'Content-Type': 'application/json'},
})
}
到此这篇关于Vue使用formData格式类型上传文件的文章就介绍到这了,更多相关Vue上传文件内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue使用formData格式类型上传文件的示例全部内容，希望文章能够帮你解决Vue使用formData格式类型上传文件的示例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。