如何通过基于类的API(Django Rest Framework)发送数据(来自Reactjs)

Question

我试图将一些表单数据发送到后端，我一直使用基于函数的api，但由于找不到如何完成我需要的操作，我遵循了教程，获得了一些基于类的api，但我真的不知道它是如何工作的。使用POSTMAN，通过输入所有的键和值，请求工作，数据被插入，但是当我发送数据时，它不会进入

Views.py

class TestView(APIView):
def post(self, request, *args, **kwargs):
serializer = EnrolSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
return Response(serializer.errors)

序列化程序.py

class EnrolSerializer(serializers.ModelSerializer):
class Meta:
model = Enroles
fields = '__all__'

URL.py

path('testapi/', TestView.as_view(), name='testing'),

我不太确定如何发送数据，因为我正在使用常规的基于文本的数据以及文件和图像

Page.js

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Registration from "./Registration";
import RegistrationSteps from "./RegistrationSteps";
import { Container, Button, Row, Col, Form } from "react-bootstrap";
import FormContainer from "../FormContainer";
import pictures from "../../pictures";
import {
finalPageRegistration,
} from "../../actions/registrationActions";
function RegistrationFinale({ history }) {

const [dossier, setDossier] = useState();
const [avatar, setAvatar] = useState();
const dispatch = useDispatch();
const registrationInfos = useSelector((state) => state.detailsInfo);
const {
persoDetails,
preferences,
urgenceInfo,
braceletInfo,
discount,
} = registrationInfos;
const priceNoreduction =
preferences.emerPrice + braceletInfo.braceletPrice + preferences.favPrice;
if (discount === 0) {
finalprice = priceNoreduction;
} else {
finalprice =
priceNoreduction -
(preferences.emerPrice +
braceletInfo.braceletPrice +
preferences.favPrice) *
(discount.reduction / 100);
}
if (finalprice === NaN) {
history.push("/registration/step4");
}
const fPrice = { price: finalprice };
const everything = Object.assign(
{},
persoDetails,
preferences,
urgenceInfo,
braceletInfo,
fPrice,
registrationInfos.code
);
const changeHandler = (event) => {
setDossier(event.target.files[0]);
};
const changePicHandler = (event) => {
setAvatar(event.target.files[0]);
};
const submitHandler = async () => {
const formData = new FormData();
// Update the formData object
if (dossier !== null && avatar !== null) {
formData.append("dossier", dossier);
formData.append("avatar", avatar);
}
dispatch(finalPageRegistration(everything, formData));
history.push("/");
};
return (
<Container>
<Registration />
<RegistrationSteps step1 step2 step3 step4 step5 />
<FormContainer>

<section className="py-3 text-center mb-3">
<Row>
<Col md={6}>
<h4>Dossiers physiques </h4>
<FormContainer>
<Form>
<Form.Group>
<Form.File id="dossier" onChange={changeHandler} />
</Form.Group>
</Form>
</FormContainer>
<img src={pictures[0].image} alt="folder" width="25%"></img>
</Col>
<Col md={6}>
<h4>Photo recente</h4>
<FormContainer>
<Form>
<Form.Group>
<Form.File id="avatar" onChange={changePicHandler} />
</Form.Group>
</Form>
</FormContainer>
<img src={pictures[1].image} alt="folder" width="25%"></img>
</Col>
</Row>
<br />
</section>
<div className="text-center">
<Button
variant="success "
onClick={submitHandler}
className="btn-block col-3 mb-3"
>
S'inscrire
</Button>{" "}
</div>
</FormContainer>
</Container>
);
}
export default RegistrationFinale;

这是行动调度

let res;
export const finalPageRegistration = (data) => async (dispatch) => {

res = await axios.post(
"http://localhost:8000/api/testapi/",
JSON.stringify(data)
);

dispatch({
type: FINAL_PAGE_REGISTRATION,
payload: res,
});
};

Answer 1

问题在于发送数据的方式。

由于您的数据包括文件，您不能使用JSON.stringify，但您需要在包含文件的表单数据中添加所有字段，然后发送。此外，您还需要设置适当的标题；

const config = {
headers: {
"Content-Type": 'multipart/form-data' // to accept form-data
}
}
let data = new FormData()
data.append('your_key', your_value)
//for files (say images)
data.append('image', {
uri: image.uri, //where image is the image recieved from the user by means of any picker
name: image.name // if name is included in the image data else set your own name
type: mime.getType(image.uri) // here i am using mime, an npm package to get the accurate type of a file. using image.type directly gives errors as that includes only half info
})
axios.post('your_url', data, config)
.then(res => {
//do whatever you want
})
/catch(err => {
//do whatever you want
})

记得安装mime

npm install mime

然后在文件的顶部；

import mime from 'mime'