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组件之间的通信方式(推荐!)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
    2022-06-06
  • Vue Element前端应用开发之Vuex中的API Store View的使用

    Vue Element前端应用开发之Vuex中的API Store View的使用

    这篇文章主要介绍了Vue Element前端应用开发之Vuex中的API Store View的使用,对Vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue中的组件详谈

    Vue中的组件详谈

    这篇文章主要介绍了Vue的组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue的缓存方法示例详解

    Vue的缓存方法示例详解

    这篇文章主要给大家介绍了关于Vue缓存方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue3中使用sse最佳实践,封装工具详解

    vue3中使用sse最佳实践,封装工具详解

    这篇文章主要介绍了vue3中使用sse最佳实践,封装工具,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue3中slot插槽基本使用

    Vue3中slot插槽基本使用

    插槽slot可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容,这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
    2022-08-08
  • vue+element项目中过滤输入框特殊字符小结

    vue+element项目中过滤输入框特殊字符小结

    这篇文章主要介绍了vue+element项目中过滤输入框特殊字符小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue3 源码解读之 time slicing的使用方法

    vue3 源码解读之 time slicing的使用方法

    这篇文章主要介绍了vue3 源码解读之 time slicing的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue导航栏部分的动态渲染实例

    vue导航栏部分的动态渲染实例

    今天小编就为大家分享一篇vue导航栏部分的动态渲染实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue动画效果实现方法示例

    vue动画效果实现方法示例

    这篇文章主要介绍了vue动画效果实现方法,结合完整实例形式分析了vue.js+animate.css实现的动画切换效果相关操作技巧,需要的朋友可以参考下
    2019-03-03

最新评论