封装可以上传照片和视频（都可回显可删除，视频可播放）的插件

 <template>
    <div class="upload">

    <label for="file-upload" class="upload-btn">

      <el-icon size="30" color="000"><Plus /></el-icon>

    </label>

    <input id="file-upload" type="file" accept="image/*, video/*" @change="handleFileChange" />

    <div class="mediabox" v-for="media in mediaList" :key="media.id">

      <img v-if="media.type === 'image'" :src="media.url" alt="uploaded image" @dblclick="media.showdelBtn = true" />

      <video v-else :src="media.url" controls @dblclick="media.showdelBtn = true"></video>

      <button v-if="media.showdelBtn" @click="media.showdelBtn = false">

        <el-icon @click="deleteMedia(media.id)" color="#fff" size="30"><Delete /></el-icon>

      </button>

    </div>

  </div>

</template>

<script>

import { ref } from 'vue';

export default {

  name: 'UploadMedia',

  data() {

    return {

      mediaList: [],

    };

  },

  methods: {

    handleFileChange(event) {

      const files = event.target.files;

      for (let i = 0; i < files.length; i++) {

        const file = files[i];

        const reader = new FileReader();

        reader.onload = () => {

          const media = {

            id: Date.now(),

            type: file.type.includes('image') ? 'image' : 'video',

            url: reader.result,

            showdelBtn: false,

          };

          this.mediaList.push(media);

        };

        reader.readAsDataURL(file);

      }

    },

    deleteMedia(id) {

      const index = this.mediaList.findIndex((media) => media.id === id);

      if (index !== -1) {

        this.mediaList.splice(index, 1);

      }

    },

  },

};

</script>

<style scoped lang="scss">

.upload {

  input {

    // width: ;

  }

  .mediabox {

    position: relative;

    width: 400px;

    img {

      width: 100%;

    }

    video {

      width: 100%;

    }

    button {

      position: absolute;

      left: 0;

      width: 100%;

      height: 100%;

      border: none;

      background-color: rgba($color: #000000, $alpha: 0.5);

    }

  }

}

.upload-btn {

  display: inline-block;

  padding: 10px 20px;

  background-color: #ccc;

  cursor: pointer;

  border-radius: 4px;

}

.upload-btn span {

  vertical-align: middle;

}

#file-upload {

  display: none;

}

.media-item {

  margin-top: 10px;

}

.media-item button {

  margin-top: 5px;

}

</style>