如何使用Axios将文件上传到Django？

Question

我正在从Jquery AJAX转换到react-dropzone＆Axios，我想将文件上传到我的Django服务器，我没有问题将图像的blob URL发布到服务器上，但是我想在request.FILES下获取它，但我得到了一个空的查询集。

request.FILES : <MultiValueDict: {}>  <!--- empty
request.POST  : <QueryDict: {}>       <!--- able to get a blob url

这是我的 axios 配置：

const temporaryURL = URL.createObjectURL(step3.drop[0]);

var fd = new FormData();
fd.append('image', temporaryURL);

axios({
  method: 'post',
  url: SITE_DOMAIN_NAME + '/business-card/collect/',
  data: fd,
  headers: {
    "X-CSRFToken": CSRF_TOKEN, 
    "content-type": "application/x-www-form-urlencoded"
  }
}).then(function (response) {
  console.log(response)
  URL.revokeObjectURL(temporaryURL);
}).catch(function (error) {
  console.log(error)
});

我在classBasedView中收到了POST请求的文件。

我该如何上传文件？我错在哪里了吗？

编辑

我也尝试过使用"application/form-data"，但问题仍未解决。

- Hiroyuki Nuri

Answer 1

问题出在content-type上，它使用了"application/form-data"而不是"multipart/form-data"。

- Hiroyuki Nuri

---

如何使用 axios.post(url, data, config) 进行操作？ - JChao

@JChao 与上面相同，将 url 替换为您的端点，data 替换为有效载荷，config 替换为标头。 - Hiroyuki Nuri

我试过了。似乎Django在传递文件后无法找到数据文件。我想知道我的头文件是否有问题，但在data中设置content-type并没有帮助我。我的应用程序仍然使用angularJS，并且我们使用ngf-drop库处理拖放操作。当我console.log我的data时，我可以看到文件存在，但是在发送到Django之后，该文件就会消失。你知道这里发生了什么吗？ - JChao

@JChao content-type 应该在头部而不是在 data 中。你发送的是什么类型的数据，是 json 还是使用了 FormData 对象？ - Hiroyuki Nuri

我认为我需要逐一将对象中的所有内容追加到 FormData 对象中。我还在这里尝试。谢谢你的帮助。 - JChao

Answer 2

我在这里回答，以防有人通过谷歌搜索到这里：

let formData = new FormData();
formData.append('myFile', file);
formData.append('otherParam', 'myValue');

axios({
  method: 'post',
  url: 'myUrl',
  data: formData,
  headers: {
    'content-type': 'multipart/form-data'
  }
}).then(function (response) {
    // on success
}).catch(function (error) {
    // on error 
});

- MOHAMAD MONZER