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" 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（'简单吗？⽼铁'）
inputtypefile不上传文件})
},
差点忘记⼀步,axios请求⼆次封装我就不多说了，这⾥只展⽰下接⼝
export const tMessageNotification = data =>{
return request({
url:'/tMessageNotification/upload',
method: 'POST',
data,
headers: {'Content-Type': 'application/json'},
})
}
到此这篇关于Vue使⽤formData格式类型上传⽂件的⽂章就介绍到这了，更多相关Vue上传⽂件内容请搜索以前的⽂章或继续浏览下⾯
的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。