前端
<body>
<input id="fileRef" type="file" />
<button onclick="push">Push</button>
<script>
function push() {
const file = fileRef.files[0];
const formData = new FormData();
formData.append('image', file, file.name);
fetch('http://127.0.0.1:8000/api/item/', {
headers: {
'Content-Type': 'multipart/form-data',
},
method: 'POST',
body: formData
});
}
</script>
</body>
后台
from rest_framework.parsers import MultiPartParser
class ItemViewSet(ModelViewSet):
...
parser_classes = [MultiPartParser]
上面是bug的最小实现,当我发送请求时,它会生成这样的错误:Multipart form parse error - Invalid boundary in multipart: None
请求头、负载
我花了很长时间,不知道如何解决;)
我试着像这样改变内容类型'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
但是它不起作用,我的期望是django能够正确地解析并成功地接受文件
1条答案
按热度按时间6rvt4ljy1#
一开始我以为是django的问题,但后来我发现我在前端的请求是不正确的;)
WebAPI
fecth
,发送multipart/form-data
时,无需手动设置请求头中的Content-Type
属性!!!如果请求体是
FormData
,浏览器会自动将Content-Type: multipart/form-data
添加到头部并添加正确的边界。我在浏览这些articles的时候发现了这个,反正我的问题成功解决了~
我在这里回答我之前问过的一个问题,也许不久的将来会有人来这里问我同样的问题,哈哈哈哈哈……