欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 产业 > 【vue-media-upload 升级玩法】一个页面用两个Uploader,一个上传图片,一个上传视频(分开传,容易分开设置和展示图片和视频)

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

2025/9/28 4:30:34 来源:https://blog.csdn.net/weixin_41899098/article/details/142472761  浏览:    关键词:【vue-media-upload 升级玩法】一个页面用两个Uploader,一个上传图片,一个上传视频(分开传,容易分开设置和展示图片和视频)

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

不得不说,这是一个大坑

一、方法

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

二、经验和教训

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

三、过程

设置变量

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

四、总结

所以说,尽量别动别人的代码,真的牵一发而动全身
要改,也得采用方法循序渐进的改,不然会很懵逼

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词