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

시도해 볼 수 있습니다. 그냥 새로운 formData 객체를 만들고 그것을 이름을 전달하고

이이

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

그리고 당신의 방법에 입력을 변경

파일 : [

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{ 

     } 

    }) 

    } 

}