Come posso caricare un’immagine usando vue js?

Ho bisogno di caricare l’immagine usando vue js.

Il mio codice html per inserire l’immagine è

 

Il mio codice vue js è come ..

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

Cosa posso fare per implementare lo stesso. Questa è la prima volta che faccio un lavoro. Sono bloccato sullo stesso. Qualcuno può aiutarmi per ottenere il risultato?

Puoi provare questo Basta creare un nuovo object formData e passargli il nome e il file

Cambia il tuo contributo a questo

  

E i tuoi metodi per questo:

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