vuejs에서 이미지를 어떻게 업로드합니까?

Question

다음은 내 vue 구성 요소의 스크립트 섹션에있는 코드입니다.

모든 입력란이 올바르게 표시되지만 이미지 및 동영상 업로드시 빈 값이 표시됩니다.

나는이 문제를 해결하려고 노력했지만 아무 소용이 없습니다.

 playVideo(url) { 
      let video = $('#video-preview').get(0); 
      video.preload = 'metadata'; 
      // Load video in Safari/IE11 
      if (url) { 
       video.muted = false; 
       video.playsInline = true; 
       video.play(); 
      } 
     }, 

     // Read a file input as a data URL. 
     readDataUrl(input, callback) { 
      if (input.files && input.files[0]) { 
       let fileReader = new FileReader(); 
       fileReader.onload = function() { 
        callback(fileReader.result); 
       }; 
       fileReader.readAsDataURL(input.files[0]); 
      } 
      else { 
       callback(null); 
      } 
     }, 

     // Read a file input as an object url. 
     readObjectUrl(input, callback) { 
      if (input.files && input.files[0]) { 
       let fileReader = new FileReader(); 
       fileReader.onload = function() { 
        let blob = new Blob([fileReader.result], {type: input.files[0].type}); 
        let url = URL.createObjectURL(blob); 
        callback(url, blob); 
       }; 
       fileReader.readAsArrayBuffer(input.files[0]); 
      } 
      else { 
       callback(null); 
      } 

     }, 

    } 

} 

정확하게 달성하고 싶은 것은 이미지 및 비디오 파일을 업로드하고 blob로 저장하기 전에 미리 봅니다.

상기 이미지

이미지 및 비디오 빈 블로 값을 보이고있다 @samayo 내 반응을 나타낸다.

Answer 1

axios 또는 fetch을 사용하는 경우 vue로 파일을 업로드하는 것은 매우 쉽습니다.

이것은 현재 프로젝트의 사본/파스타입니다. 나는 이미지를 업로드 Axios의를 사용

먼저 당신이 입력되어 있어야합니다 같이 :

<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input"> 

는 다음과 같은 방법을 추가

methods: { 

    uploadImage(event) { 

    const URL = 'http://foobar.com/upload'; 

    let data = new FormData(); 
    data.append('name', 'my-picture'); 
    data.append('file', event.target.files[0]); 

    let config = { 
     header : { 
     'Content-Type' : 'image/png' 
     } 
    } 

    axios.put(
     URL, 
     data, 
     config 
    ).then(
     response => { 
     console.log('image upload response > ', response) 
     } 
    ) 
    } 
}