How can I able to upload picture using vue js?

Question

I need to upload the image using vue js.

My html code to insert picture is

 <input type="file" id="wizard-picture">

My vue js code is as..

 <script>
submitBox = new Vue({
el: "#submitBox",
  data: {
   username: '',
   picture: '',

  },
  methods: {
     handelSubmit: function(e) {
           var vm = this;
           data = {};
           data['username'] = this.username;
           data['picture'] = this.picture;
            $.ajax({
              url: 'http://127.0.0.1:8000/api/add/post/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
              {
               alert("Registration Success")

              window.location.href = "https://localhost/n2s/registersuccess.html";
            }
              else {
                vm.response = e;

               alert("Registration Failed") 
              }
          }
            });
            return false;
}
},
});
         </script>

What can I do to implement the same. This is the first time I am doing a work. I am stuck on the same. Can anybody Please help me to obtain the result?

Inside your jquery replace data:data with data:e.target.files[0] — samayo
– samayo, Commented Dec 14, 2017 at 11:15
does it at least work for the uploading? passing the name is simple — samayo
– samayo, Commented Dec 14, 2017 at 11:30

samayo · Accepted Answer · 2017-12-14 11:35:09Z

1

You can try this. Just create a new formData object and pass it the name and file

Change your input to this

<input type="file" id="wizard-picture"  @change="handleSubmit($event)">

And your methods to this:

methods: {
  handleSubmit (e) {

    let data = new FormData()
    data.append('name', 'image')
    data.append('file', e.target.files[0])

    $.ajax({
      url: 'http://127.0.0.1:8000/api/add/post/',
      data: data,
      type: 'POST',
      success () {

      }else{

      }

    })

  }

}

answered Dec 14, 2017 at 11:35

samayo

16.5k13 gold badges95 silver badges115 bronze badges

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

Collectives™ on Stack Overflow

How can I able to upload picture using vue js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related