在 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，需要通过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",
    },
})