插件窝 干货文章 Vue使用formData类型上传文件

Vue使用formData类型上传文件

formData class 上传 文件 51    来源:    2024-10-30

使用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'},
  })
}

总结

以上为个人经验,希望对您有所帮助。