作为前端开发者，时常需要实现拖动上传的功能。今天我们来学习如何在 Vue.js 中实现这个功能，让用户拖动图片上传到网站。
准备工作
在开始之前，需要提前安装 Vue.js 和 axios。
npm install vue axios
在 Vue.js 中实现拖放上传图片，需要使用 HTML5 拖放 API 和 FormData 对象。这些 API 还需要浏览器支持，所以请确保您的浏览器支持这些 API。在调试时建议使用 Chrome 浏览器，其拖放 API 支持性较好。
实现步骤
下面我们编写一个简单的拖放上传图片的示例。
编写 HTML 模板
我们需要一个用于拖放的区域和一个用于显示上传结果的区域，代码如下：
-- -------------------- ---- -------
----------
-----
---- ----------------- ----------------- ---------------
--------------
------
---- --------------------
------------
----- ------------ ------
------
------
-----------编写 JavaScript 代码
接下来我们来编写拖放上传图片的 JavaScript 代码。首先，我们需要绑定拖放事件，并阻止拖放默认事件：
-- -------------------- ---- -------
--------
------ ----- ---- --------
------ ------- -
------ -
------ -
------------- ---
--
--
-------- -
------------- -
-----------------------
--
--
--
---------然后我们需要获取用户拖放到我们的应用程序中的文件。可以使用 File API 来获得拖放的文件：
-- -------------------- ---- -------
--------
------ ----- ---- --------
------ ------- -
------ -
------ -
------------- ---
--
--
-------- -
------------- -
-----------------------
----- ----- - -------------------------
----------------------
--
----- ------------ -
-- ---
--
--
--
---------接下来，我们需要将文件上传到服务端。在这个示例中，我们使用 axios 发送缩略图并获取服务端响应内容：
-- -------------------- ---- -------
--------
------ ----- ---- --------
------ ------- -
------ -
------ -
------------- ---
--
--
-------- -
------------- -
-----------------------
----- ----- - -------------------------
----------------------
--
----- ------------ -
----- -------- - --- -----------
------------------------ ------
----- -------- - ----- ------------------------- ----------
----- ---- - --------------
----------------- - -------- -----------------
--
--
--
---------到现在为止，我们已经实现了一个简单的拖放上传图片的示例。用户可以将图片文件拖放到网站上的 drop-area 区域中，然后图片将发送给服务端。
总结
实现拖放上传图片的功能需要使用 HTML5 拖放 API 和 FormData 对象。我们需要在拖放事件处理程序中阻止默认事件，然后通过 File API 获取拖放的文件。接着，我们将文件添加到 FormData 对象中，并使用 axios 发送请求并处理响应。
在实现类似的功能时，需要考虑更多方面的需求，例如文件的类型和大小限制，上传进度的显示等等。
完成以上步骤后，你便可以在 Vue.js 中轻松地实现拖放上传图片的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f21562f6b2d6eab3bd9a1b