You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Django API接收CSV文件报错MultiValueDictKeyError求助

解决React向Django API上传CSV文件时的MultiValueDictKeyError问题

出现django.utils.datastructures.MultiValueDictKeyError: 'file'错误,核心原因是前端未正确传递文件,导致后端无法获取到名为file的文件对象。以下是具体修复步骤:

React代码修复点

  1. 正确获取单个文件对象:e.target.files返回的是FileList集合,需取第一个元素作为上传文件
  2. 移除手动设置的Content-Type:浏览器会自动为multipart/form-data请求添加正确的boundary,手动设置会导致格式错误

修改后的React代码:

import { useState } from 'react';
import './App.css';

function App() {
  const [file, setFile] = useState(null);

  const uploadFiles = e => {
    // 取FileList中的第一个文件
    setFile(e[0]);
  };

  const insertFile = async() => {
    if (!file) return; // 增加文件判断,避免空上传
    const f = new FormData();
    f.append("file", file);

    await fetch(
      '/api/eda/', // 替换为你的实际API地址
      {
        method: 'POST',
        // 移除手动设置的content-type,让浏览器自动处理
        body: f,
      })
      .then((response) => response.json())
      .then((data)=>{
        console.log(data);
      })
      .catch(error=>{
        console.log(error);
      });
  };

  return (
    <>
      <input type="file" name="file" onChange={(e)=>uploadFiles(e.target.files)}/>
      <button onClick={()=>insertFile()}>上传文件</button>
    </>
  );
}

export default App;

Django代码优化(可选但推荐)

为避免文件未传递时直接报错,可增加判断逻辑:

from rest_framework.decorators import api_view
from rest_framework.response import Response
import csv

@api_view(['POST'])
def eda(request):
    # 使用get方法避免KeyError,同时判断文件是否存在
    file = request.FILES.get('file')
    if not file:
        return Response({'error': '未上传文件'}, status=400)
    
    data = []
    # Django的UploadedFile是类文件对象,直接读取即可,无需open
    csvReader = csv.DictReader(file)
    for rows in csvReader: 
        data.append(rows)
    
    response = {
        'csvData': data 
    }
    return Response(response)

内容的提问来源于stack exchange,提问作者user20627094

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 01:15:50