反应：未捕获类型错误：无法在“FormData”上执行“追加”：参数 2 不是“Blob”类型

Question

为什么我会收到此错误React: Uncaught TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'. 当我尝试在 React 中上传图片时，我无法真正判断错误的来源，因为我已经做了几乎所有的事情来修复错误。

添加课程.js

import { useEffect, useState } from 'react';
import axios from 'axios'


const baseUrl = 'http://127.0.0.1:8000/api';

function AddCourse() {
    const [cats, setCats] = useState([])
    const [courseData, setCourseData] = useState({
        category:"",
        title:"",
        description:"",
        teacher:"",
        f_img:"",
        techs:"",
    })

    // load the data
    useEffect(() => {
        try {
            axios.get(baseUrl + '/category/').then((res) => {
                setCats(res.data)
            })
        } catch (error) {
            console.log(error);
            console.log("error");
        }
    }, [])
    // console.log(cats);

    const handleChange = (event) => {
        setCourseData({
            ...courseData,
            [event.target.name]: event.target.value
        })
    }
    const handleFileChange = (event) => {
        setCourseData({
            ...courseData,
            [event.target.name]: event.target.files[0]
        })
    }

    const formSubmit = () => {

        const _formData = new FormData()
        _formData.append("category", courseData.category)
        _formData.append("teacher", 1)
        _formData.append("title", courseData.title)
        _formData.append("featured_img", courseData.f_img, courseData.f_img.name)
        _formData.append("description", courseData.description)
        _formData.append("techs", courseData.techs)

        try {
            axios.post(baseUrl + '/course/', _formData, {
                headers: {
                    'content-type':'multipart/form-data'
                }
            }).then((res) => {
                console.log(res.data);
            })
        } catch (error) {
            
            }
    }

    return (
                <div>
            <input onChange={handleChange} name="title" type="text" className="form-control" name="" id="" />

            <textarea onChange={handleChange} name="description" className="form-control" placeholder="" />

            <select onChange={handleChange} name="category" className="form-control" id="">
                {cats.map((category, index) => {return
                <option key={index} value={category.id}>{category.title}</option>
                })}
            </select>

            <input onChange={handleFileChange} name="f_img" type="file" className="form-control" id="" />

            <textarea onChange={handleChange} name="techs" className="form-control" placeholder="React, Django, Express" />

            <button onClick={formSubmit} className="btn btn-primary" type="submit">Update</button>
        </div>

                            
    );
}

export default AddCourse;

Answer 1

在处理程序中它应该是files

[event.target.name]: event.target.files[0]

添加到表单数据时应该是

_formData.append("featured_img", courseData.f_img, courseData.f_img.name)