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

Question

我试图在Django-react-redux中为文件应用放置请求。我试图做的是，用户应该必须使用从放置请求提交的 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 = (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",
},
})