Tengo vue-upload-component. Necesito mostrar las imágenes cargadas y mostrar en cada botón de imagen para cargar una nueva imagen. Según entendí, este complemento no tiene un método para cambiar el archivo cargado. Así que pienso hacerlo manualmente. Pero no sé cómo abrir la carpeta para elegir archivos.
¿Cómo abrir la carpeta de exploración para una nueva imagen?
</template> <div> <file-upload :ref="uploaderName" v-model="files" :input-id="uploaderName" :extensions="formats" :drop="drop" :multiple="multiple" @input-filter="inputFilter" > Upload a file </file-upload> <span>or drag and drop</span> </div> <div v-show="files.length && !loading" class="flex" > <img v-for="image in files" :key="image.id" :src="image.url" :style="[imageSize]" class="uploaded-image p-2 mr-2 border rounded border-gray-200" > <button @click.prevent='() => uploadNew(image)'> Upload new </button> <button @click.prevent='() => removeFile(image)'> Remove </button> </div> </template> <script> import FileUpload from 'vue-upload-component'; export default { name: 'UploadFileForm', components: { FileUpload, }, props: { uploaderName: { type: String, required: true, default: '', }, formats: { type: Array, default: () => ['.jpg', '.jpeg', '.svg', '.png', '.webp'], }, multiple: { type: Boolean, default: true, }, drop: { type: Boolean, default: true, }, imageWidth: { type: Number, }, imageHeight: { type: Number, }, value: { type: Array, default: () => {}, }, }, data() { return { files: this.value || [], error: '', loading: false, hover: false, minImageWidth: 372, minImageHeight: 300, }; }, methods: { removeFile(file) { this.$refs[this.uploaderName].remove(file); }, uploadNew() { } }; </script>Hay diferentes enfoques para hacer esto. Una es crear un área donde puede seleccionar un archivo para cargar o arrastrar y soltar para cargar.
<template> <div class="file-upload"> <div class="text_field" @click="pickFile" @drop="uploadFile" @dragover.prevent @drop.prevent > <input id="file" ref="image" :accept="allowedFileTypes" style="display: none" type="file" @change="uploadFile" /> <span v-if="fileUploading"> File uploading </span> <span v-else> Drag file here or click to upload </span> </div> </div> </template>Guion
<script> export default { name: "UploadFile", data() { return { fileUploading: false, allowedFileTypes: ".pdf, .jpg, .jpeg, .png, .doc, .docx, .xls, .xlsx, video/*, audio/*", }; }, methods: { pickFile() { this.$refs.image.click(); }, async uploadFile(e) { this.fileUploading = true; const files = e.target.files || e.dataTransfer.files; if (!files.length) { return; } const file = document.getElementById("file").files[0]; /* Creating a form element so that it can be detected as req.files (in Node.js, for example) */ const fileForm = new window.FormData(); fileForm.append("file", file); /* Simulating uploading of files, we wait for two seconds */ setTimeout(() => { this.fileUploading = false; }, 2000); /* Below, you can make a request to your backend to post the image */ /* await axios.post('your_upload_file_url', fileForm) .then(res => res) .catch((error) => Promise.reject(error)) */ }, }, }; </script>También puedes agregar algunos estilos.
<!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> .file-upload { border: 1px dashed #007991FF; border-radius: 5px; height: 192px; cursor: pointer; text-align: center; vertical-align: middle; span { position: relative; top: 75px; padding: 20px; font-size: 14px; color: #cac8c8; } } </style>