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

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

article 2024/12/24 11:40:28

此文写于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 = true
    let files = event.target.files

    for (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 FormData
                let 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 = null
    this.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)
}