随着 Web 应用程序的发展，文件上传和下载已经成为了一个必不可少的功能。在前端开发中，Vue.js 是一个非常流行的框架，而 axios 是一个常用的 HTTP 库，可以帮助我们实现文件上传和下载。本文将介绍如何在 Vue.js 中使用 axios 实现文件上传和下载。
文件上传
文件上传是指将本地文件上传到服务器。在 Vue.js 中，我们可以使用 axios 发送一个 POST 请求来实现文件上传。以下是一个简单的示例：
----------
-----
------ ----------- --------------- ---------------------
------
-----------
--------
------ ----- ---- -------
------ ------- -
-------- -
------------ -
----- ---- - -----------------------------
----- -------- - --- ----------
----------------------- -----
------------------------- --------- -
-------- -
--------------- ---------------------
-
--
-------------- -- -
--------------------------
--
------------ -- -
------------------
--
-
-
-
---------在这个示例中，我们使用了一个 <input> 元素来让用户选择文件。当用户选择完文件后，我们可以通过 this.$refs.fileInput.files[0] 获取到选中的文件，然后创建一个 FormData 对象，并将文件添加到其中。最后，我们使用 axios 发送一个 POST 请求，将文件上传到服务器。
需要注意的是，在发送 POST 请求时，我们需要设置 Content-Type 为 multipart/form-data，以告诉服务器这是一个文件上传请求。
文件下载
文件下载是指将服务器上的文件下载到本地。在 Vue.js 中，我们同样可以使用 axios 发送一个 GET 请求来实现文件下载。以下是一个简单的示例：
----------
-----
------- ---------------------------------------
------
-----------
--------
------ ----- ---- -------
------ ------- -
-------- -
-------------- -
-------------------------- -
------------- ------
--
-------------- -- -
----- --- - ------------------------------ ----------------------
----- ---- - ---------------------------
--------- - ---
----------------------------- -----------
-------------------------------
------------
--
------------ -- -
------------------
--
-
-
-
---------在这个示例中，我们使用了一个 <button> 元素来触发文件下载。当用户点击按钮后，我们使用 axios 发送一个 GET 请求，将服务器上的文件下载到本地。
需要注意的是，在发送 GET 请求时，我们需要设置 responseType 为 blob，以告诉 axios 返回的数据为二进制数据。接着，我们使用 window.URL.createObjectURL 创建一个 URL，然后创建一个 <a> 元素，并将 URL 和文件名设置为其属性。最后，我们将 <a> 元素添加到页面上，并触发其点击事件，即可将文件下载到本地。
总结
文件上传和下载是 Web 应用程序中常见的功能。在 Vue.js 中，我们可以使用 axios 来实现文件上传和下载。本文介绍了如何使用 axios 发送 POST 和 GET 请求来实现文件上传和下载，并提供了示例代码。希望本文能够帮助你实现文件上传和下载功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65696aadd2f5e1655d1f7c31