Vue使用formData类型上传文件
更新时间：2024年08月28日 10:32:54 作者：前端大斗师
这篇文章主要介绍了Vue使用formData类型上传文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用formData类型上传文件
在vue中，我们普遍是前后端分离项目，即需要使用axios等工具向后台发送请求实现对数据的操作。
其中，文件上传算是比较难的一种。这篇文章教会你上传文件。
如图片上传，后端需要前端传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兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下2019-10-10
Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决
这篇文章主要介绍了Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue3使用withDefaults和defineProps设置默认值的操作指南
文章详细比较了Vue3中使用defineProps和withDefaults设置props默认值的优缺点,defineProps简洁但代码臃肿,withDefaults分离定义与默认值设置,提高可读性,且默认值不会丢失,但代码分散,适用于复杂组件和动态生成默认值,促进代码复用和维护,需要的朋友可以参考下2026-05-05
这篇文章主要介绍了vue实现按钮的长按功能,点击按钮实现长按，用户需要按下按钮几秒钟，然后触发相应的事件，本文通过实例代码给大家分享实现思路，感兴趣的朋友一起看看吧2022-01-01
这篇文章主要介绍了浅谈vue中$event理解和框架中在包含默认值外传参，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue serve及其与vue-cli-service serve之间的关系解读
这篇文章主要介绍了vue serve及其与vue-cli-service serve之间的关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
详解在vue-cli中使用graphql即vue-apollo的用法
这篇文章主要介绍了详解在vue-cli中使用graphql即vue-apollo的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本文介绍了ElementUI和Antd+Vue中el-table和a-table实现行合并的方法,包括基本使用、实现步骤、示例代码等,通过自定义计算合并行数的方法,可以灵活实现表格数据的合并显示,提升数据的可读性和用户体验,需要的朋友可以参考下2026-04-04
这篇文章主要介绍了基于Vue实现图片在指定区域内移动，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
今天小编就为大家分享一篇vue-resource:jsonp请求百度搜索的接口示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论