input框视频音频图片拖拽

最新推荐文章于 2024-05-23 15:38:49 发布



最新推荐文章于 2024-05-23 15:38:49 发布

阅读量132

点赞数 3

文章标签：音视频前端 javascript

本文链接：https://blog.csdn.net/weixin_53954018/article/details/136283700

版权

<template>
    <div class="dropzone" @dragover.prevent @drop="handleDrop">
        <p style="position: absolute;top: 0px;left: 0px;line-height: 40px;">拖拽文件到这里上传</p>
        <input type="file" ref="fileInput" style="display: none" accept="image/*, audio/*, video/*"
            @change="handleFileSelected" />
    </div>
</template>
  
<script>
export default {
    methods: {
        handleDrop(event) {
            event.preventDefault();
            const files = event.dataTransfer.files;
            this.handleFiles(files);
        },
        handleFileSelected(event) {
            const files = event.target.files;
            this.handleFiles(files);
        },
        handleFiles(files) {
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    this.$emit('upload-image', file);
                } else if (file.type.startsWith('audio/')) {
                    this.$emit('upload-audio', file);
                } else if (file.type.startsWith('video/')) {
                    this.$emit('upload-video', file);
                }
            }
        }
    }
}
</script>
  
<style lang="less" scoped>
.dropzone {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
</style>

调用：
            <imgVideoAudio @upload-image="handleImageUpload" @upload-audio="handleAudioUpload"
              @upload-video="handleVideoUpload"></imgVideoAudio>

    handleImageUpload(file) {
      if (file && file.type) {
        if (file.type.includes('image')) {
          var path = "/search/picture";
          let params = this.$route.query;
          this.$router.push({ path: path, query: params });
        }
      }
      console.log('上传图片', file);
    },
    handleAudioUpload(file) {
      // 处理上传音频的逻辑
      if (file && file.type) {
        if (file.type.includes('audio')) {
          var path = "/search/audios";
          let params = this.$route.query;
          this.$router.push({ path: path, query: params });
        }
      }
      console.log('上传音频', file);
    },
    handleVideoUpload(file) {
      if (file && file.type) {
        if (file.type.includes('video')) {
          var path = "/search/spmedia";
          let params = this.$route.query;
          this.$router.push({ path: path, query: params });
        }
      }
      console.log('上传视频', file);
    },