这篇文章主要讲解了“Vue如何使用formData格式类型上传文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue如何使用formData格式类型上传文件”吧!
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('简单吗?老铁') }) },
差点忘记一步,axios请求二次封装我就不多说了,这里只展示下接口
export const tMessageNotification = data =>{ return request({ url:'/tMessageNotification/upload', method: 'POST', data, headers: {'Content-Type': 'application/json'}, }) }
感谢各位的阅读,以上就是“Vue如何使用formData格式类型上传文件”的内容了,经过本文的学习后,相信大家对Vue如何使用formData格式类型上传文件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。