基于Vue实现文件拖拽上传功能

更新时间：2024年03月05日 14:49:10 作者：JYeontu

文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧

效果展示

体验地址：jyeontu.xyz/jvuewheel/#/JDragUploadView

功能实现

原生JavaScrip实现

首先我们应该先将页面写好：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>点击或拖拽上传并显示图片</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
      }
      h1 {
        text-align: center;
      }
      #drop-zone {
        width: 300px;
        height: 200px;
        border: 2px dashed #ccc;
        margin: 20px auto;
        text-align: center;
        line-height: 200px;
        font-size: 18px;
      }
      #uploaded-image {
        max-width: 300px;
        max-height: 300px;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <h1>点击或拖拽上传并显示图片示例</h1>
    <div id="drop-zone">点击或拖拽上传图片</div>
    <img id="uploaded-image" src="" alt="上传的图片" />
    <script>
    </script>
  </body>
</html>

我们试下直接拖拽图片到页面上是什么效果

我们发现直接将图片拖拽到页面上会在新页面打开图片，那么我们需要阻止这一个默认行为以允许放置，页面的拖拽行为主要会触发以下几个事件：

dragenter

dragenter 事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。

目标对象是用户直接选择的范围（由用户直接指示作为放置目标的元素），或者 <body> 元素。

dragleave

dragleave 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发。

此事件不可取消。

dragover

dragover 事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发。

该事件在放置目标上触发。

drop

drag 事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。

效果实现

获取上传框和预览框元素

const dropZone = document.getElementById("drop-zone");
const uploadedImage = document.getElementById("uploaded-image");

图片进入上传框时，为上传框加一层灰色蒙层

监听上传框的dragenter事件，在图片移动进入上传框时改变上传框的背景颜色。

dropZone.addEventListener("dragenter", function (event) {
    dropZone.style.backgroundColor = "#f7f7f7";
});

图片离开上传框时，去除上传框的灰色蒙层

监听上传框的dragleave事件，在图片移出上传框时去除上传框的背景颜色。

dropZone.addEventListener("dragleave", function (event) {
    dropZone.style.backgroundColor = "";
});

阻止浏览器默认行为，例如打开文件

dragover和drop事件都会触发浏览器打开文件，我们需要阻止其默认行为。

dropZone.addEventListener("dragover", function (event) {
    event.preventDefault();
});
dropZone.addEventListener("drop", function (event) {
    event.preventDefault();
});

获取拖拽上传的文件

拖拽释放会触发drop事件，我们只需要监听drop事件，获取到拖拽的文件列表event.dataTransfer.files即可。

dropZone.addEventListener("drop", function (event) {
    event.preventDefault();
    dropZone.style.backgroundColor = "";
    const file = event.dataTransfer.files[0];
    handleFile(file);
});

处理上传文件，为图片时设置预览图

判断上传的文件是否为图片，我们只需要判断上传文件的type是否为image开头，是的话我们可以将其转为dataUrl文件并设置预览。

  function handleFile(file) {
    if (file && file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = function (event) {
        uploadedImage.src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  }

封装为vue组件

知道了原生js实现一个拖拽上传功能之后，我们也能很容易得将其封装成一个vue组件。

监听拖拽事件

在vue中，我们直接通过@dragover、@dragleave、@drop即可监听元素的拖拽事件。

<div
    class="upload-area"
    @dragover.prevent="handleDragOver"
    @dragleave="handleDragLeave"
    @drop.prevent="handleDrop"
    @click="handleUploadClick"
>
    <p v-if="!isDragging" class="tip-text">{{ tipText }}</p>
    <p v-else>{{ tipConfirmText }}</p>
</div>

事件的处理逻辑和原生js其实都是一样的。

methods: {
    handleDragOver(event) {
        event.preventDefault();
        this.isDragging = true;
    },
    handleDragLeave() {
        this.isDragging = false;
    },
    handleDrop(event) {
        event.preventDefault();
        this.isDragging = false;
        const file = event.dataTransfer.files[0];
        this.uploadFile(file);
    }
}

获取到上传文件并传递给父组件

获取到上传的文件后，我们不应该组件内直接处理文件了，将其传递给父组件进行处理即可。

uploadFile(file) {
    this.$emit("uploadFile", file);
}

组件完整代码

功能逻辑与原生JavaScrip基本相同，这里也不重复描述了，直接看代码吧：

<template>
    <div class="drag-upload">
        <div
            class="upload-area"
            @dragover.prevent="handleDragOver"
            @dragleave="handleDragLeave"
            @drop.prevent="handleDrop"
            @click="handleUploadClick"
        >
            <p v-if="!isDragging" class="tip-text">{{ tipText }}</p>
            <p v-else>{{ tipConfirmText }}</p>
        </div>
        <input
            type="file"
            ref="fileInput"
            style="display: none"
            @change="handleFileSelected"
        />
    </div>
</template>

<script>
export default {
    name: "JDragUpload",
    props: {
        tipText: {
            type: String,
            default: "将文件拖放到此处或点击上传",
        },
        tipConfirmText: {
            type: String,
            default: "释放文件以上传",
        },
    },
    data() {
        return {
            isDragging: false,
        };
    },
    methods: {
        handleDragOver(event) {
            event.preventDefault();
            this.isDragging = true;
        },
        handleDragLeave() {
            this.isDragging = false;
        },
        handleDrop(event) {
            event.preventDefault();
            this.isDragging = false;
            const file = event.dataTransfer.files[0];
            this.uploadFile(file);
        },
        handleUploadClick() {
            this.$refs.fileInput.click();
        },
        handleFileSelected() {
            const file = this.$refs.fileInput.files[0];
            this.uploadFile(file);
        },
        uploadFile(file) {
            this.$emit("uploadFile", file);
        },
    },
};
</script>

<style lang="less" scoped>
.drag-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    border: 2px dashed #ccc;
    .upload-area {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        cursor: pointer;
        .tip-text {
            text-align: center;
        }
    }
}
</style>

以上就是基于Vue实现文件拖拽上传功能的详细内容，更多关于Vue文件拖拽上传的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue动态删除从数据库倒入列表的某一条方法
今天小编就为大家分享一篇vue动态删除从数据库倒入列表的某一条方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue之bus总线的简单使用解读
这篇文章主要介绍了vue之bus总线的简单使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue props传值失败输出undefined的解决方法
今天小编就为大家分享一篇vue props传值失败输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue实现用户登录及token验证
这篇文章主要为大家详细介绍了Vue实现用户登录及token验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
利用v-viewer图片预览插件放大需要预览的图片
本文介绍了v-viewer插件的安装和使用步骤,包括npm安装、在main.js文件中全局引入,以及常用的三种使用方式,文章提供了简单的布局页面效果,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-10-10
Vue中渲染系统模块的实现详解
想要实现一个简洁版的Mini-Vue框架，应该包含三个模块：分别是：渲染系统模块、可响应式系统模块、应用程序入库模块，本文主要介绍的是渲染系统模块的实现，需要的可以参考一下
2023-07-07
vue时间线组件的使用方法
这篇文章主要为大家详细介绍了vue时间线组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue.js组件tree实现无限级树形菜单
这篇文章主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue路由懒加载的实现方法
本篇文章主要介绍了vue路由懒加载的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue-electron项目创建记录及问题小结解决方案
这篇文章主要介绍了vue-electron项目创建记录及注意事项,本文给大家分享了运行项目报错的问题小结及多种解决方案,需要的朋友可以参考下
2024-03-03

基于Vue实现文件拖拽上传功能

目录

效果展示

功能实现

原生JavaScrip实现

封装为vue组件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具