How to upload an image from vue js to django rest framework?

Question

I am using django-rest-framework as my backend and I want to upload an Image from the frontend(vuejs2) note: the backend works perfectly and I can upload the photo using django admin

What have you tried so far? And what doesn't work?

Jack
– Jack

2022-02-06 00:11:18 +00:00
Commented Feb 6, 2022 at 0:11 — Jack
– Jack, Commented Feb 6, 2022 at 0:11

OysterD3 · Accepted Answer · 2022-02-06 12:28:26Z

1

I assume your backend accept multipart/form-data and using axios

<input type="file" @change="onFileChange" />

export default {
  methods: {
    onFileChange(e) {
      const formData = new FormData();
      formData.append("file", e.target.files[0]);
      axios
        .post("/upload", formData)
        .then(() => {
          console.log("SUCCESS");
        })
        .catch(() => {
          console.log("FAILED");
        });
    },
  },
}

answered Feb 6, 2022 at 12:28

OysterD3

2826 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wassim Mriri Over a year ago

Thank you for your response sending a formdata made it work because I was sending the data in a form instead of a formdata

Collectives™ on Stack Overflow

How to upload an image from vue js to django rest framework?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related