Sé que se ha hecho esta pregunta. Pero no tengo idea de cómo usar el código en vuejs. Probé mucho pero sin ningún resultado. También agregué mi código. ¿Puede alguien por favor ayudarme? Este es mi código. Gracias
html
<template> <div class="fileUpload"> <b-container fluid> <h4>Image Overview</h4> <b-button @click="$refs.fileInput.click()" class="btn-right">Select an image</b-button> <b-table @row-clicked="viewImage" striped hover :items="images" :fields="image_fields"></b-table> <input style="display: none" ref="fileInput" type="file" @change="fileSelected" enctype="multipart/form-data"> <b-button variant="success" class="btn-right" @click="uploadImage" method="post">Upload image</b-button> </b-container> </div>js
<script> export default { name: 'listImage', data() { return { selectedFile: null, images: [], image_fields: ['id', 'name'], total_images: 1 } }, methods: { fileSelected(evt) { evt.preventDefault() console.log(evt); this.selectedFile = evt.target.files[0] }, uploadImage() { var data = new FormData(); data.append('image', this.selectedFile, this.selectedFile.data) var token = sessionStorage.getItem('token') const config = { headers: { 'Content-Type': 'multipart/form-data' } } window.API.post('https://110.10.56.10:8000/images/?token=' + token, data, config) .then(response => this.$router.push('/listImage')) .catch((error) => { console.log(JSON.stringify(error)) }) } } }Tenga en cuenta que un navegador no puede mostrar todos los tipos de imágenes (por ejemplo, un tiff no funcionará con este método).
Hay algunos pasos:
@change const vm = new Vue({ el: '#app', data() { return { url: null, } }, methods: { onFileChange(e) { const file = e.target.files[0]; this.url = URL.createObjectURL(file); } } }) body { background-color: #e2e2e2; } #app { padding: 20px; } #preview { display: flex; justify-content: center; align-items: center; } #preview img { max-width: 100%; max-height: 500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <input type="file" @change="onFileChange" /> <div id="preview"> <img v-if="url" :src="url" /> </div> </div>