我们在本文中构建的文件上传器与上一篇相比有何不同？之前的拖放文件上传器是用 Vanilla JS 构建的，真正专注于如何使文件上传和拖放文件选择工作，所以它的功能集是有限的。在您通过简单的进度条和图像缩略图预览选择文件后，它会立即上传文件。您可以在这个演示中看到所有这些。
除了使用 Vue，我们还将更改功能：添加图像后，它不会立即上传。相反，将显示缩略图预览。缩略图的右上角会有一个按钮，如果您不想选择图像或改变主意上传它，它将从列表中删除文件。
然后单击“上传”按钮将图像数据发送到服务器，每张图像将显 台湾电话号码清单 示其上传状态。最重要的是，我制作了一些时髦的款式（不过我不是设计师，所以不要太苛刻地判断）。我们不会在本教程中深入研究这些样式，但您可以在GitHub 存储库中自行复制或筛选它们——不过，如果您要复制它们，请确保您设置了您的项目能够使用 Stylus 样式（或者您可以将其设置为使用 Sass 并更改lang为scss样式块，它将以这种方式工作）。您还可以在演示页面上看到我们今天正在构建的内容。
注意：我假设读者有很强的 JavaScript 知识，并且很好地掌握了 Vue 的特性和 API，尤其是 Vue 3 的组合 API，但不一定是使用它们的最佳方式。本文旨在学习如何在 Vue 应用程序的上下文中创建拖放式上传器，同时讨论良好的模式和实践，不会深入探讨如何使用 Vue 本身。
建立 Vue 项目的方法有很多种都有自己的项目脚手架工具，我相信还有更多。我对它们中的大多数都不太熟悉，我不会为这个项目指定任何一种工具，所以我建议阅读您选择的任何一种工具的文档，以弄清楚如何设置我们的方式这个小项目需要它。 我们需要使用脚本设置语法设置 Vue 3 ，如果您从Github 存储库中获取我的样式，则需要确保您已设置为从 Stylus（或您可以将其设置为使用 Sass 并将lang样式块更改为“scss”，这样就可以了）。 掉落区 # 现在我们已经设置了项目，让我们深入研究代码。我们将从处理拖放功能的组件开始。这将是一个简单的包装器div元素，其中大部分包含一堆事件侦听器和发射器。这种元素是可重用组件的理想候选者（尽管它只在这个特定项目中使用过一次）：它有一个非常具体的工作要做，而且这个工作足够通用，可以在很多不同的方式/地方使用无需大量定制选项或复杂性。