イメージを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を使用します。

まず、あなたの入力を持っている必要があります。このようになります。あなたがしようとしているURLへ

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