Upload File using Vue axios and Django Python Backend

Question

I have VueJs as my front end where i have upload component and using formdata to create request and axios to make rest api call to backend written in Django Python.

My Front upload method looks like:

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 })
      })
  }
},

Now backed micro service is Django Python where I want to use the file. However i am not getting the file here.

Code looks like below

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

i tried above two ways to extract files from request object but no success, however it works if i send request via postman.

when i am doing request.body, its giving me bytes like b'------WebKitFormBoundaryeLyU6scm9zAftfdU\r\nContent-Disposition: form-data; name="file"\r\n\r\n[object File]\r\n------WebKitFormBoundaryeLyU6scm9zAftfdU--\r\n' What i am looking for though is MultiValueDict to use — Avitesh Kesharwani

4l12 4l12 · Accepted Answer · 2020-09-24T01:43:17

If it works using postman, you might want to compare the headers being sent from Postman and your frontend. Use request.META in django to see what is different.

Upload File using Vue axios and Django Python Backend

1 Answers