当前位置：首页 > news >正文

【vue-media-upload 升级玩法】一个页面用两个Uploader,一个上传图片，一个上传视频（分开传，容易分开设置和展示图片和视频）

news 2024/11/16 16:26:52

此文写于2024年，凌晨4点，此时我经历了重构把自己玩死，启用备份，继续重构，完成。停坎坷的。
在这过程中，我感受到了，变量管理的混乱，也意识到了加入vuex的必要性（此时我还没有引入 vuex，也没有做好 store）

不得不说，这是一个大坑

一、方法

先做一个 Uploader，做好之后注释掉
在做另一个Uploader
做好之后，取消前一个注释
调试，发现问题，解决问题
不断地 console.log
最终完成

二、经验和教训

真的不要随便改别人的组件，很要命的，一不小心就会把自己玩死（修改之前记得做好备份）

三、过程

设置变量

const imageMedia = ref({saved: [],added: [],removed: [],all: []
})
const videoMedia = ref({saved: [],added: [],removed: [],all: []
})

设置函数

// 将editedProduct.productImages更新为media.saved和media.added的合并
watch(imageMedia, (newMedia) => {editedProduct.productImages = newMedia.saved.concat(newMedia.added);}, { deep: true}
);
watch(videoMedia, (newMedia) => {editedProduct.productVideos = newMedia.saved.concat(newMedia.added);}, { deep: true}
);const addMedia = (addedImage, addedMedia) => {imageMedia.value.added = addedMedia
}const removeMedia = (removedImage, removedMedia) => {imageMedia.value.removed = removedMedia
}
const addVideoMedia = (addedImage, addedMedia) => {videoMedia.value.added = addedMedia
}const removeVideoMedia = (removedImage, removedMedia) => {videoMedia.value.removed = removedMedia
}const handleAllMedia = (media) => {imageMedia.value.all = media
}
const handleAllVideoMedia = (media) => {videoMedia.value.all = media
}

设置组件

<Uploader:server="server":media="imageMedia.saved":accept="['image/jpeg', 'image/png']"@add="addMedia"@remove="removeMedia"@init="handleAllMedia"
/>
<Uploader:server="server":media="videoMedia.saved":accept="['video/mp4']"@add="addVideoMedia"@remove="removeVideoMedia"@init="handleAllVideoMedia"
/>

修改组件

<div v-for="(image, index) in savedMedia">和<div v-for="(image, index) in addedMedia">中都要添加

<template v-if="isImage(image.url)"><img :src="image.url" alt=""  class="mu-images-preview">
</template>
<template v-if="isVideo(image.url)"><video controls class="mu-images-preview"><source :src="image.url" type="video/mp4"></video>
</template>

修改 props

accept : {type: Array,default: ['image/*']
}

在script 中添加方法

isImage(url) {const imageExtensions = /\.(jpg|jpeg|png|gif|bmp)$/i;return imageExtensions.test(url);
},
isVideo(url) {const videoExtensions = /\.(mp4|webm|ogg)$/i;return videoExtensions.test(url);
},

修改方法

async fileChange(event) {this.isLoading = truelet files = event.target.filesfor (var i = 0; i < files.length; i++) {if (!this.max || this.allMedia.length < this.max) {if (files[i].size <= this.maxFilesize * 1000000) {let formData = new FormDatalet url = URL.createObjectURL(files[i])formData.set('image', files[i])var { data } = await axios.post(this.server, formData, this.config)data = '/image/' + data;let addedImage = { url: data, size: files[i].size, type: files[i].type }this.addedMedia.push(addedImage)console.log(this.addedMedia)console.log(this.savedMedia)this.$emit('change', this.allMedia)this.$emit('add', addedImage, this.addedMedia)} else {this.$emit('maxFilesize', files[i].size)if (this.warnings) {alert('The file you are trying to upload is too big. \nMaximum Filesize: ' + this.maxFilesize + 'MB')}break;}} else {this.$emit('max')if (this.warnings) {alert('You have reached the maximum number of files that you can upload. \nMaximum Files: ' + this.max)}break;}}event.target.value = nullthis.isLoading = false
},
removeAddedMedia(index) {let removedImage = this.addedMedia[index]this.addedMedia.splice(index, 1)this.$emit('change', this.allMedia)this.$emit('remove', removedImage, this.removedMedia)this.$emit('init', this.allMedia)
},
removeSavedMedia(index) {let removedImage = this.savedMedia[index]this.removedMedia.push(removedImage)this.savedMedia.splice(index, 1)this.$emit('change', this.allMedia)this.$emit('remove', removedImage, this.removedMedia)this.$emit('init', this.allMedia)
}