Upload file with Vuejs

Question

i'm working in Laravel. i need to upload file with Vuejs. but it's not working. I add this code:

Blade (File upload):

<input class="form-control" type="file" >

Script Vuejs : var app = new Vue({ el: '#app',

data: {
person: {
        id: 0,
        user_name:'',
        position_id:'',
        image:'',
        },
        },


    methods: {
      addPerson: function () {
        axios.post('/addperson', this.person)
            .then(response => {
                console.log(response.data);
                if (response.data.etat) {
                    this.person = {
                         id: 0,
                          user_name: response.data.etat.user_name,
                          position_name: response.data.etat.position_id,
                          image: response.data.etat.image
                    };
                }

            })
            .catch(error => {
                console.log('errors: ', error)
            })
    },

Controller:

public function addPerson(Request $request){
$person = new Person;

$person->user_name=$request->user_name;
$person->position_id=$request->position_id;
 if($request->hasFile('photo')){
     $person->image= $request->image->store('image');
    }
$person->save();

return back()->with('success', 'New Position added successfully.');

My Axios post function is working without the image upload line code. I just don't know how to add the upload code.

Thank you if someone can help.

Polaris · Accepted Answer · 2018-09-27 18:44:31Z

3

In your blade file

<input type="file" @change="onFileChange" name="id_image" id="id_image" class="inputFile">

In your vue.js file, under methods:

    onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },

createImage(file) {
            let reader = new FileReader();
            reader.onload = (e) => {
                this.person.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },

That should allow your axios code to upload the image. Note, that it uploads in base64, so if you need validators you will have to create a custom Validator for base64 images.

answered Sep 27, 2018 at 18:44

Polaris

1,2499 silver badges14 bronze badges

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

Comments

TEster · Accepted Answer · 2019-10-17 15:21:40Z

I struggled to find out how to do this, but I've now found a way. Hopefully this makes someones life easier(I have the uploadUserImage method in a mixin):

HTML: <input type="file" @change="uploadImage($event)">

JS:

uploadImage (e) {
      this.file = e.currentTarget.files[0]
      let formData = new FormData()
      formData.append('img', this.file)
      this.uploadUserImage(formData)
}

    uploadUserImage: function (formData) {
      axios.post('http://snowdon-backend.local:8000/api/users/img', formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(function (response) {
          console.log(response)
        })
    }

Make sure file is set in the data method as well:

data () {
    return {
      file: ''
    }
  }

Collectives™ on Stack Overflow

Upload file with Vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related