django - 在 django-react-redux 中对文件的 PUT 请求

Question

我试图在 Django-react-redux 中为文件应用 put 请求。我试图做的是，用户应该必须使用从 put 请求提交的 ID 替换文件。我在 django-restframework 中写了以下代码.

class EarSingleView(APIView):

    parser_classes = (MultiPartParser, FormParser)

    def get(self, request, ear_id, *args, **kwargs):
        ear = Ear.objects.get(pk=ear_id)
        serializer = EarSerializers(ear)
        return Response(serializer.data)

    def delete(self, request, ear_id, *args, **kwargs):
        ear = Ear.objects.get(pk=ear_id)
        ear.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

    def put(self, request, ear_id):
        ear = Ear.objects.get(pk=ear_id)
        serializer = EarSerializers(ear, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

我的获取请求和删除请求工作正常。但在 PUT请求，如果我尝试更改提交的文件并尝试提交，则会出现以下错误， 400:Bad request. detail: "Multipart form parse error - Invalid boundary in multipart: None"
我的表格是这样的

<form onSubmit={this.onSubmit} encType="multipart/form-data">
  <Input
    placeholder="Enter layer name..."
    name="name"
    value={name}
    onChange={this.onChange}
   />

   <input
     type="file"
     name="fileName"
     onChange={this.handleFileChange}
   />
</form>

我的表单 onSubmit 事件是这样的，

onSubmit = (e) => {
    e.preventDefault();
    const {
      name,
      file,
    } = this.state;

    const newEARData = {
      id: this.props.idNumber,
      name,
      file,
    };

    axios
    .put(`http://localhost:8000/api/ear/${newEARData.id}`, newEARData, {
      headers: {
        "content-type": "multipart/form-data",
      },
    })
    .then((res) => {
      dispatch({
        type: UPDATE_EAR,
        payload: res.data,
      });
    })
}

获取请求看起来像这样，

 axios
    .get(`http://localhost:8000/api/ear/${id}`)
    .then((res) => {
      dispatch({ type: GET_DETAILED_EAR, payload: res.data });
    })

请任何人向我建议在 django-react-redux 设置中替换文件(放置请求)的最佳方法是什么？

Answer 1

要传递多部分表单数据，您需要通过 FormData 传递它, 简单的 json 对象不起作用

const formData = new FormData();
formData.append('id',this.props.idNumber)
formData.append('name',name)
formData.append('file',file)
axios.put(`http://localhost:8000/api/ear/${this.props.idNumber}`, formData, {
    headers: {
    "content-type": "multipart/form-data",
    },
})