Vue如何使用formData格式类型上传文件

这篇文章主要讲解了"Vue如何使用formData格式类型上传文件"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"Vue如何使用formData格式类型上传文件"吧！

1.如图片上传，后端需要前端传formData类型数据的情况下

点击上传 

我们使用原生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如何使用formData格式类型上传文件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！