vue jsを使用して画像をアップロードするにはどうしたらいいですか？

Question

vue jsを使用して画像をアップロードする必要があります。画像を挿入する

私のhtmlコードは

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

マイVUEのjsのコードのようにある..です

<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> 

私は同じことを実現するために何ができますか。私が仕事をしているのは初めてです。私は同じことに固執しています。誰でも結果を得るのを助けてくれますか？

Answer 1

これを試すことができます。 [

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{ 

     } 

    }) 

    } 

}