如何通过基于类的 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__'

网址.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'