使用 Vue axios 和 Django Python 后端上传文件答案

【问题标题】：Upload File using Vue axios and Django Python Backend使用 Vue axios 和 Django Python 后端上传文件
【发布时间】：2021-01-10 06:21:22
【问题描述】：

我有 VueJs 作为我的前端，我有上传组件并使用 formdata 来创建请求，并使用 axios 对用 Django Python 编写的后端进行 rest api 调用。

我的前端上传方法如下：

uploadFiles() {
  if (!this.currentFile) {
    this.message = "Please select a file!";
    return
  } else {
    let formData = new FormData();
    formData.append("file", this.currentFile);
    const instance = axios.create({
      baseURL: "<URL>",
      withCredentials: false,
    });
    instance
      .post("/test/", formData, {
        headers: {
          "content-type": "multipart/form-data",
        },
      })
      .then((response) => {
        console.log("Success!")
        console.log({ response })
      })
      .catch((error) => {
        console.log({ error })
      })
  }
},

现在支持的微服务是 Django Python，我想在其中使用该文件。但是我没有在这里获取文件。

代码如下所示

@api_view(['POST'])
def attachment(request):
  myFile = request.FILES
  myfile2 = request.data.initial_data

我尝试了以上两种从请求对象中提取文件的方法，但没有成功，但是如果我通过邮递员发送请求，它就可以工作。

【问题讨论】：

当我在做 request.body 时，它给了我像 b'-----WebKitFormBoundaryeLyU6scm9zAftfdU\r\nContent-Disposition: form-data; 这样的字节。 name="file"\r\n\r\n[object File]\r\n------WebKitFormBoundaryeLyU6scm9zAftfdU--\r\n' 我正在寻找的是 MultiValueDict 使用

标签： javascript python django vue.js axios

【解决方案1】：

如果它使用邮递员工作，您可能需要比较邮递员和您的前端发送的标头。在 django 中使用 request.META 看看有什么不同。

【讨论】：