如何使post请求与图像使用axios?

Question

要创建帖子，用户必须通过创建帖子的表单并上传图像，但是我不知道如何做到这一点。

我试图发送文件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

#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>