Как сделать пост запрос с изображением с помощью axios?

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

Я пытался отправить файл 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)

#Api 
import axios;

const avatarupload = (data, uuid) => {
  return axios.post(`endpoint/`, data).then(
    (res) => res,
    (error) => error.response
  );
};

#Store 
getAvatar = async (data, cb) => {
    const uuid = LocalStorageService.getUuid();
    const resp = await avatarupload(data, uuid);
    if (resp.status === 200) {
      this.setMessage('Successfully Updated');
      this.setUser(resp.data);
      cb();
    } else {
      cb(resp.data.error);
    }
    this.setPicLoading(false);
  };

#web page
const handleFileChange = async (event) => {
    const data = new FormData();
    data.append('avatar', event.target.files[0]);
    getAvatar(data, (error) => {
      setError(error);
    });
    setFader(1);
  };


 <Form.Group controlId='formBasicText'>
                <button
                  className='primary'
                  type='button'
                  onClick={handleChangeAvatarClick}
                >
                  CHANGE AVATAR
                </button>
                <Form.Control
                  style={{ display: 'none' }}
                  type='file'
                  ref={hiddenFileInput}
                  onChange={handleFileChange}
                  accept='image/*'
                />
              </Form.Group>
Вернуться на верх