web-dev-qa-db-fra.com

Comment télécharger une image dans vuejs?

Veuillez trouver ci-dessous mon code dans la section script de mon composant vue.

Je reçois tous les champs de saisie correctement, mais les téléchargements d'images et de vidéos affichent des valeurs vides.

J'ai essayé de résoudre ce problème mais en vain.

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

        },

    }

}

Ce que je veux exactement, c'est télécharger une image et un fichier vidéo, les prévisualiser avant de les enregistrer en blob.

the response

L'image ci-dessus montre ma réponse @samayo

L'image et le blob vidéo affichent des valeurs vides.

javascriptlaravelvue.js
12
cjustinobi

Si vous utilisez axios ou fetch le téléchargement de fichiers avec vue est assez facile.

Ceci est une copie/pâtes de mon projet actuel. J'utilise axios pour télécharger des images:

Vous aurez d'abord besoin que votre entrée ressemble à ceci:

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

Ajoutez ensuite une méthode comme celle-ci:

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

Je pense que dans votre cas, vous cherchez une solution comme celle-ci

exemple: téléchargement d'une image et prévisualisation avant la soumission

<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

Si vous souhaitez télécharger une image et la prévisualiser avant la soumission vous pouvez utiliser de manière simple et fonctionnelle en option.

<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