web-dev-qa-db-ja.com

vuejsで画像をアップロードするにはどうすればよいですか？

以下に、私の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として保存することです。

the response

上の画像は私の応答@samayoを示しています

画像とビデオのブロブに空の値が表示されています。

javascriptlaravelvue.js
12
cjustinobi

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

あなたの場合、あなたはこのような解決策を探していると思います

例：画像をアップロードして送信前にプレビューする

<template>
   <div>
      <img src:"previewImage" class="uploading-image" />
      <input type="file" accept="image/jpeg" @change=uploadImage>
   </div>
</template>

<script>
    export default {
        name:'imageUpload',
        data(){
            return{
               previewImage:null
            }
        },
        methods:{
            uploadImage(e){
                const image = e.target.files[0];
                const reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onload = e =>{
                    this.previewImage = e.target.result;
                    console.log(this.previewImage);
                };
            }
        }
     }  // missing closure added
</script>



<style>
   .uploading-image{
     display:flex;
   }
 </style>
8
Kalanka

画像をアップロードして送信前にプレビューしたい場合オプションとしてシンプルで機能的な方法を使用できます。

<template>
  <input type="file" accept="image/*" @change="onChange" />
  <div id="preview">
    <img v-if="item.imageUrl" :src="item.imageUrl" />
  </div>
</template>


<script>
export default {
  name: 'imageUpload',
  data() {
    return {
      item:{
          //...
          image : null
          imageUrl: null
      }
    }
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      this.image = file
      this.item.imageUrl = URL.createObjectURL(file)
    }
  }
} 
</script>
0
het