在现代 Web 应用中，文件上传功能已经成为了必不可少的一部分。Vue.js 作为一款流行的前端框架，它的强大特性和易于使用的 API 使得实现文件上传功能变得十分简单。本文将介绍如何利用 Vue.js、axios 和 FormData 实现文件上传功能，希望对初学者有一些帮助。
什么是 axios 和 FormData
在开始介绍文件上传的具体实现前，我们需要了解一些基础知识。axios 是一个基于 Promise 构建的 HTTP 库，在发送 AJAX 请求方面十分出色。而 FormData 则是一种用于处理表单数据以及多媒体数据的 API，可以将表单数据编码为键值对，方便提交到后端服务器。通过结合 axios 和 FormData，我们可以轻松地实现文件上传。
实现文件上传的步骤
实现文件上传需要经历一些具体的步骤，包括：定义文件选择的表单、定义文件上传的 API 接口、定义上传操作的方法以及定义上传成功和上传失败的回调函数。
步骤一：定义文件选择的表单
我们首先需要在 Vue.js 的模板中添加一个文件选择的表单，供用户选择需要上传的文件。
<template>
<div>
<input type="file" ref="fileInput">
<button @click="uploadFile">上传文件</button>
</div>
</template>在上面的代码中，我们定义了一个 input 标签，它的 type 属性为 file，可以让用户选择需要上传的文件。同时，我们还定义了一个按钮，当用户点击按钮时，会触发 uploadFile 方法进行文件上传。需要注意的是，我们将 input 标签设置了 ref 属性，方便在后面获取用户选择的文件。
步骤二：定义文件上传的 API 接口
接下来，我们需要定义一个 API 接口，用于接收用户上传的文件。在这个例子中，我们假设后端服务器的上传 API 地址为 /upload。需要注意的是，我们要在请求头中指定 Content-Type 为 multipart/form-data，让后端服务器知道这是一个文件上传操作。
-- -------------------- ---- -------
----- ------------- - --------------
-- ---------
-------- --------------------------
-------- -
--------------- ---------------------
-
--
-------- ---------- ------ -
----- -------- - --- ----------
----------------------- -----
------ ----------------------------- ---------
-在上面的代码中，我们首先利用 axios.create 方法创建了一个 axios 实例，指定了后端服务器的地址和请求头。接着，我们定义了一个名为 uploadFile 的方法，它接收一个文件作为参数，并将文件转换为 formData 格式的数据。最后，我们通过 axios 实例的 post 方法将 formData 数据提交到后端服务器。需要注意的是，axios.post 方法会自动将请求头设置为 multipart/form-data。
步骤三：定义上传操作的方法
现在，我们需要实现 uploadFile 方法，让它能够在用户点击“上传文件”按钮时被调用，获取用户选择的文件并调用 uploadFile 方法进行文件上传。
-- -------------------- ---- -------
------ ------- -
-------- -
----- ---------- -- -
----- --------- - --------------------
----- ---- - ------------------
--- -
----- ----------------
-------------
- ----- ------- -
-------------
-
-
-
-在上面的代码中，我们定义了一个名为 uploadFile 的方法，它利用 this.$refs 获取了用户选择的文件并传递给了 uploadFile 方法。需要注意的是，我们使用了 await 和 async 等关键字，让 uploadFile 方法在文件上传完成之前等待，防止文件上传过程中页面锁死。在上传成功或上传失败后，我们弹出一个提示框告知用户上传的结果。
步骤四：定义上传成功和上传失败的回调函数
最后，我们需要定义上传成功和上传失败的回调函数，以便在文件上传成功或失败时执行一些特定的操作。在下面的代码中，我们将上传成功和上传失败的回调函数分别命名为 onUploadSuccess 和 onUploadFailed。
-- -------------------- ---- -------
----------
-----
------ ----------- ----------------
------- ---------------------------------
------
-----------
--------
----- ------------- - --------------
-- ---------
-------- --------------------------
-------- -
--------------- ---------------------
-
--
-------- ---------- ------ -
----- -------- - --- ----------
----------------------- -----
------ ----------------------------- ---------
-
------ ------- -
-------- -
----- ---------- -- -
----- --------- - --------------------
----- ---- - ------------------
--- -
----- ----------------
----------------------
- ----- ------- -
---------------------
-
-
--
------ -
---------------- -
----- ---------
--------- ----
--
--------------- -
----- ---------
--------- ----
-
-
-
---------在上面的代码中，我们通过 props 接收了 onUploadSuccess 和 onUploadFailed 两个回调函数，并在上传成功或失败时调用它们。需要注意的是，我们要在父组件中使用子组件时，手动传递这两个回调函数作为 prop 属性。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----------
-----
------ ----------- ----------------
------- ---------------------------------
------
-----------
--------
------ ----- ---- -------
----- ------------- - --------------
-- ---------
-------- --------------------------
-------- -
--------------- ---------------------
-
--
-------- ---------- ------ -
----- -------- - --- ----------
----------------------- -----
------ ----------------------------- ---------
-
------ ------- -
-------- -
----- ---------- -- -
----- --------- - --------------------
----- ---- - ------------------
--- -
----- ----------------
----------------------
- ----- ------- -
---------------------
-
-
--
------ -
---------------- -
----- ---------
--------- ----
--
--------------- -
----- ---------
--------- ----
-
-
-
---------总结
通过本文的介绍，相信大家已经能够学会如何利用 Vue.js、axios 和 FormData 实现文件上传功能了。需要注意的是，由于表单的 value 值是只读的，所以我们必须通过 JavaScript 代码来操作表单数据。同时，我们还需要指定请求头的 Content-Type 为 multipart/form-data。希望本文能够对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c1dd7968c7c53b074abe5