如何使用 Vue.js 3 制作拖放文件上传器

我们在本文中构建的文件上传器与上一篇有什么不同？以前的拖放文件上传器是用 Vanilla JS 构建的，并且真正专注于如何使文件上传和拖放文件选择工作，因此它的功能集是有限的。在您选择文件后，它会立即通过简单的进度条和图像缩略图预览上传文件。您可以在这个演示中看到所有这些。

除了使用 Vue 之外，我们还将更改功能：添加图像后，它不会立即上传。相反，将显示缩略图预览。缩略图右上角会有一个按钮，可以从列表中删除文件，以防您不想选择图像或改变主意上传它。

然后单击“上传”按钮将图像数据发送到服务器，每个图像将显示其上传状态。最重要的是，我制作了一些时髦的款式（虽然我不是设计师，所以不要太苛刻地判断）。我们不会在本教程中深入研究这些样式，但您可以在GitHub 存储库中复制或筛选它们 - 但是，如果您要复制它们，请确保您设置了您的项目能够使用 Stylus 样式（或者您可以将其设置为使用 Sass 并更改lang为scss样式块，它将以这种方式工作）。您还可以在演示页面上看到我们今天正在构建的内容。

注意：我假设读者有很强的 JavaScript 知识，并且很好地掌握了 Vue 的特性和 API，尤其是 Vue 3 的组合 API，但不一定是使用它们的最佳方式。本文旨在学习如何在 Vue 应用程序的上下文中创建拖放式上传器，同时讨论良好的模式和实践，不会深入探讨如何使用 Vue 本身。

设置 #

建立 Vue 项目的方法有很多：Vue CLI、Vite、Nuxt和Quasar都有自己的项目脚手架工具，我相信还有更多。我对它们中的大多数都不是很熟悉，而且我不会为这个项目开出任何合适的工具，所以我建议你阅读文档以了解如何设置我们的方式这个小项目需要它。

我们需要使用带有脚本设置语法的 Vue 3 进行设置，如果您从Github 存储库中获取我的样式，则需要确保您已设置为从 Stylus 编译您的 Vue 样式（或您可以将其设置为使用 Sass 并将lang样式块更改为“scss”，它将以这种方式工作）。

放置区 #

现在我们已经建立了项目，让我们深入研究代码。我们将从处理拖放功能的组件开始。这将是一个简单的包装器div元素，大部分情况下包含一堆事件侦听器和发射器。这种元素是可重用组件的绝佳候选者（尽管它在这个特定项目中只使用过一次）：它有一个非常具体的工作要做，而且这个工作足够通用，可以在很多不同的方式/地方使用无需大量自定义选项或复杂性。

这是优秀的开发人员一直关注的事情之一。将大量功能塞进一个组件中对于这个项目或其他任何项目来说都是一个坏主意，因为 1）如果你以后发现类似的情况，它就不能被重用，2）更难对代码和图形进行排序了解每件作品如何相互关联。所以，我们将尽我们所能来遵循这个原则，它从DropZone组件开始。我们将从组件的简单版本开始，然后对其进行一些修饰，以帮助您更轻松地了解正在发生的事情，所以让我们DropZone.vue在文件夹中创建一个文件src/components：

<template>
    <div @drop.prevent="onDrop">
        <slot></slot>
    </div></template><script setup>import { onMounted, onUnmounted } from 'vue'const emit = defineEmits(['files-dropped'])function onDrop(e) {
    emit('files-dropped', [...e.dataTransfer.files])}function preventDefaults(e) {
    e.preventDefault()}const events = ['dragenter', 'dragover', 'dragleave', 'drop']onMounted(() => {
    events.forEach((eventName) => {
        document.body.addEventListener(eventName, preventDefaults)
    })})onUnmounted(() => {
    events.forEach((eventName) => {
        document.body.removeEventListener(eventName, preventDefaults)
    })})</script>

首先，查看模板，您会看到一个div带有drop事件处理程序（带有prevent防止默认操作的修饰符）调用的函数，我们稍后会介绍。里面div是 a slot，所以我们可以重用这个包含自定义内容的组件。然后我们得到 JavaScript 代码，它位于带有属性的script标签内。setup

注意：如果您不熟悉我们从该属性中获得的好处，并且您没有阅读我们在上面添加的链接，请转到单文件组件的 <script setup> 文档。

在脚本中，我们定义了一个我们将发出的名为“files-dropped”的事件，其他组件可以使用该事件对此处删除的文件执行某些操作。然后我们定义onDrop处理drop事件的函数。现在，它所做的只是发出我们刚刚定义的事件，并添加一个刚刚作为有效负载删除的文件的数组。请注意，我们使用扩展运算符的技巧将文件列表从FileList提供e.dataTransfer.files给我们的 s 转换为Files 数组，以便系统中获取文件的部分可以在其上调用所有数组方法。

最后，我们来处理发生在 body 上的其他拖放事件，防止拖放过程中的默认行为（即它将在浏览器中打开其中一个文件。我们创建一个函数这只是简单地调用preventDefault事件对象。然后，在onMounted生命周期钩子中，我们遍历事件列表并阻止默认行为，即使在文档正文中也是如此。在onUnmounted钩子中，我们删除了这些侦听器。