Next.js上传CSV到FastAPI接口返回[object FileList]报错如何解决

错误原因 #

• 前端错误地将FileList对象直接转成字符串拼接到接口URL路径中，对象隐式转字符串就会得到[object FileList]
• 没有使用FormData封装文件对象，文件不能通过URL路径或普通请求体传递
• 配置了mode: 'no-cors'，会导致前端无法正常读取后端返回的响应内容
• 后端错误地将文件参数定义为路径参数，文件只能从请求体中获取

前端修复代码 #

import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';


export default function Home() {
  const { register, handleSubmit, reset } = useForm();
  const router = useRouter();
  
  
  async function onSubmitForm(data) {
    // 从FileList中取选中的第一个文件
    const csvFile = data.name[0];
    // 用FormData封装文件
    const formData = new FormData();
    formData.append('csv_file', csvFile);

    fetch('http://127.0.0.1:8000/pruebi/prueba', {
      method: 'POST', 
      // 去掉no-cors配置，要正常跨域请在FastAPI配置CORS
      body: formData, 
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response));
  }

  return (
    <div>
        <form onSubmit={handleSubmit(onSubmitForm)}>
            <input {...register("name")} type="file" accept=".csv" id="name" name="name" required/>
            <button type="submit">Submit</button> 
        </form>
    </div>
  );
}

额外说明：如果有跨域问题，在FastAPI入口文件添加CORS中间件配置即可

后端修复代码 #

from fastapi import APIRouter, File, UploadFile
from starlette.responses import RedirectResponse


from model.prueba import MongoDB


router = APIRouter()

# 移除路径中的csv参数，文件从请求体接收
@router.post("/pruebi/prueba", name="Insert the date in mongo", tags=["consultas"])
async def insertDate(csv_file: UploadFile = File(...)):
        # 读取csv文件内容传给你的封装方法即可
        csv_content = await csv_file.read()
        db = MongoDB.__init__(dBName="HAR", collectionName="date")
        MongoDB.InsertData(db, csv_content)

说明：如果你的封装方法需要文件路径，可以先把接收到的UploadFile临时存到本地再传路径即可

内容的提问来源于stack exchange，提问作者a.v. Magia