Как сделать post запрос с изображением, используя axios?

Question

[python_coder228]

Для создания поста пользователь должен пройти через форму создания постов и загрузить изображение, но я не знаю как получить изображение и отправить его на сервер.

Я пытался отправить файл

event.target.files[0]

, но получил `"POST /api/tests/ HTTP/1.1" 400 91`
это не помогло, я попытался отправить

event.target.files[0].name

, но это тоже не помогло.

TestForm.jsx:

import React, {useState} from 'react';
import axios from "axios";

function TestForm() {
    const [testInputs, setTestInputs] = useState({title: '', title_image: '', test_type: ''});
    console.log(testInputs);

    axios.defaults.xsrfCookieName = 'csrftoken'
    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"

    const handleClick = () => {
        axios({
            method: 'POST',
            url: 'http://127.0.0.1:8000/api/tests/',
            data: {
                author: 1,
                title: 'sad',
                title_image: testInputs.title_image.name,
                test_type: 2,
                question: [1, 3, 4],
                result: [1, 2]
            }
        })
    }
    return (
        <div>
        <form>
            <input onChange={(event) => {setTestInputs({...testInputs, title_image: event.target.files[0]}); console.log(event.target)}} type="file" placeholder='upload'/>
        </form>
        <button onClick={handleClick}>asd</button>
        </div>
    );
}

export default TestForm;

models.py

class Test(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=150)
    title_image = models.ImageField(default="images/IMG_1270.JPG/", null=True, blank=True, upload_to='titleImages/')
    test_type = models.ForeignKey(TestType, on_delete=models.CASCADE)
    question = models.ManyToManyField(TestQuestionBlok)
    result = models.ManyToManyField(TestResult, blank=True)


    def __str__(self):
        return self.title

views.py

class TestList(APIView):          
    def post(self, request, format=None):
        serializer1 = TestSerializers(data=request.data)
        if serializer1.is_valid():
            print(serializer1.data)
            return Response(serializer1.data, status=status.HTTP_200_OK)
        return Response(serializer1.errors, status=status.HTTP_400_BAD_REQUEST)

Answer 1

[vism]

https://developer.mozilla.org/ru/docs/Web/API/Form...