vue axios上传文件

最新推荐文章于 2024-04-22 20:11:02 发布

寒影孤下月

最新推荐文章于 2024-04-22 20:11:02 发布

阅读量437

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_53608274/article/details/129135926

版权

在项目开发中遇到上传文件功能的问题，由于前端formData中File参数名与后端定义不一致，导致调用接口时出现400错误，无法找到文件。解决方案是确保前端append的参数名与后台要求的参数名完全匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发中会使用到上传文件这项功能，下面是在开发过程中的代码，我就是append后面的参数名和后台不一致，调取接口时出现的400，找不到文件错误，希望能帮助到你们。若有不足请指教😄

<a-button @click="toImport">导入数据</a-button>
<input type="file" accept=".xlsx,.xls" ref="upFile" @change="bulkImport" style="display:none">

toImport(){
  //获取隐藏的input
   const inputFile = document.querySelector("input[type='file']");
   //触发其点击事件, 弹出文件选择
   inputFile.click();
},
//获取文件流
bulkImport(e) {
  let inputDOM = e.target.files[0];
  let formData = new FormData()
//特别注意这里的File是后台定义的参数名，一定要一致
   formData.append('File', inputDOM)
//自己定义的上传给后台的函数
   this.question(formData)
},