PUT form-data axios vue.js

Question

I just updated my User model with "avatar" field so I can upload a photo. I used a PUT method already configured and just added avatar to it. In postman the file upload (form-data) it works just fine, but when trying to upload it using axios from vue.js it doesn't work. I tried in many ways, the last one, I tried to send the request as multi form data.

async saveChanges() {
      const fd = new FormData();
      fd.append("id", this.$auth.user().id);
      fd.append("username", this.$auth.user().username);
      fd.append("email", this.user.email);
      fd.append("firstName", this.$auth.user().firstName);
      fd.append("lastName", this.$auth.user().lastName);
      fd.append("isAdmin", this.$auth.user().isAdmin);
      fd.append("password", this.user.password);
      fd.append("confirmpass", this.user.confirmpass);
      fd.append("avatar", this.selectedFile, this.selectedFile.name);
      fd.append("_method", "put");
      try {
        await this.axios.put(`/users/${this.$auth.user().id}`, {
          fd
        }).then((res) => {
          console.log(res);
        });
      } catch (err) {
        console.error(err);
      }
}

After i choose the file, it is available, but I am unable to send it trough my method. Should i create another request just for updating the avatar or is it possible to solve this?

Jasim Juwel · Accepted Answer · 2020-12-20 16:32:26Z

5

Pass your method as post method and define put in form data formData.append('_method', 'PUT') .

async handleSubmit() {

      let formData = new FormData();
      formData.append('image', this.file);
      formData.append('title', this.form.title);
      formData.append('_method', 'PUT')

      try {
        const response = await axios.post(`image-update/${this.$route.params.id}`, formData)

        this.$router.push('/');
        console.log(response);
      } catch (e) {
        this.error = 'Something error found !';
      }
    }

answered Dec 20, 2020 at 16:32

Jasim Juwel

7661 gold badge9 silver badges19 bronze badges

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

Comments

Alexander Rogovoy · Accepted Answer · 2020-06-23 13:20:05Z

4

Try this

axios.put('/users/${this.$auth.user().id', fd, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

answered Jun 23, 2020 at 13:20

Alexander Rogovoy

563 bronze badges

6 Comments

user_id Over a year ago

hey, tried it. still not working. I also tried to pass this trough config

Alexander Rogovoy Over a year ago

You wrote that you are unable to send a request with a file. What sort of problem have you faced? Did you catch any exceptions?

user_id Over a year ago

no, it's not throwing any error. try { await this.axios.put(/users/${this.$auth.user().id}, fd, { headers: { "Content-Type": "multipart/form-data" } }).then((res) => { console.log(res); }); } catch (err) { console.error(err); } but i'm not getting any res in console either. in postman i am able to put with form-data, but when trying from vue js it doesn't throw any error, i m getting my file correctly, i cant figure out what am i missing

user_id Over a year ago

im sending the data in the body

Alexander Rogovoy Over a year ago

Well, what the response do you see on the Network tab in your DevTool, when you're sending the request. What status and response object are there?

|

Sanaulla · Accepted Answer · 2022-06-29 06:16:41Z

0

My previous wrong code that return empty result in $request->all()

let data = new FormData()
data.append('message', 'AnyMessage')

Then I change it as follows and it's working fine -

let data = "message=AnyMessage"

answered Jun 29, 2022 at 6:16

Sanaulla

1,69916 silver badges15 bronze badges

Collectives™ on Stack Overflow

PUT form-data axios vue.js

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related