Как отправить изображение внутри формы в переменной состояния в react на бэкенд django

Я пытаюсь отправить изображение для хранения в бэкенде. Изображение хранится в react useState, который обновляется, когда пользователь изменяет форму ввода, и отправляется в django backend api. Этот api принимает и другие входные данные, не только изображение, но и строки. Поэтому для отправки запроса я храню все в useState и выполняю запрос в async-функции. Апи проверен на работу на postman, проблема в том, что я не очень хорошо знаю, как сделать запрос. Изображение является необязательным параметром, поэтому оно прекрасно работает только с другими входными данными, без изображения.

Ранее я игнорировал изображение и выполнял запрос вместе с другими входными данными, что прекрасно работало. Я сделал это, поместив все в объект. Однако когда я помещаю изображение в тот же объект, оно перестает работать. Я осмотрелся и выяснил, что для отправки изображений нужно использовать конструктор FormData, что я и сделал, но столкнулся с несколькими проблемами.

Вот как выглядит мой компонент формы:

export default function Component() {
    const [ image, setImage ] = useState<File>();


    const handleImageChange =  (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        console.log('file', file)
        setImage(file);
    }

    const handleSubmit = async (e: any) => {
        const dummy_info = {
           name: "hello",
           start_date: "2024-01-01"
        }


        e.preventDefault();
  

        const formData = new FormData();


        formData.append('name', info.name);
        formData.append('start_date', info.start_date);
        
        if (image) formData.append('event_picture', image);

        const res = await apiService.post('<backend_api_url>', formData, {
                            "Content-Type": "multipart/form-data"
                       });

    }

    return (
            <form onSubmit={handleSubmit}>
              
                <input
                    // value={info.event_picture || ''}
                    className="self-center" id="image" type="file" accept="image/*"
                    onChange={handleImageChange}
                    />
                <button type="submit">Submit</button>
            </form>
    )
}

У меня есть следующий объект apiService, который я использую для надежного выполнения этих вызовов, хотя я думаю, что здесь может быть одна из проблем:

const apiService = {
    post: async function(url: string, data?: any, extraHeaders?: any): Promise<any> {
        console.log('post', url, data);
        try {
            const token = await getAccessToken();
            const headers = {
                'Authorization': `Bearer ${token}`,
                "Content-Type": "application/json",
                'Accept': 'application/json',
            };

            if (extraHeaders) {
                Object.assign(headers, extraHeaders);
            }

            return new Promise((resolve, reject) => {
                fetch(`${process.env.NEXT_PUBLIC_API_HOST}${url}`, {
                    method: 'POST',
                    body: data,
                    headers: headers
                })
                    .then(response => response.json())
                    .then((json) => {
                        console.log('Response:', json);

                        resolve(json);
                    })
                    .catch((error => {
                        reject(error);
                    }))
            })
        } catch (e) {
            console.error('error fetching data', e);
        }

    },
}

При добавлении изображения и выполнении этого запроса я получаю в ответ следующее {detail: 'Multipart form parse error - Invalid boundary in multipart: None'}

Я знаю, что объект FormData не пуст, так как я console.log и он возвращает значения (для изображения: ['event_picture', File])

примечание: я использую Nextjs и заранее благодарю вас

Вернуться на верх