在很多 Vue.js 单页面应用（SPA）中，我们需要实现图片上传的功能。本文将会提供详细的指导，让你能够在 Vue.js SPA 应用中使用 Axios 和 FormData 对象来实现图片上传功能。
FormData 对象
在接下来的内容中，我们将使用 JavaScript 的原生对象 FormData 来实现图片上传。FormData 对象可以用来创建表单数据，它可以通过 AJAX 请求发送给服务器。使用 FormData 对象，我们可以直接将整个表单转换为一个字符串，这使得我们可以更容易地将文件上传。
实现文件上传
1. 获得文件
首先，我们需要选择文件并将其保存在一个变量中。在 Vue.js SPA 中，我们可以使用 input 标签和 ref 以及 $refs 对象来实现。以下是一个示例代码：
-- -------------------- ---- -------
----------
-----
---------------
------ ----------- --------------- -------------------------- --
------
-----------
--------
------ ------- -
-------- -
------------------ -
--------- - -----------------------------
-
-
-
---------在示例代码中，我们使用了 input 类型为 file 的标签，并使用 ref 属性将其绑定到 $refs 对象中。在 handleFileUpload 方法中，我们将文件保存在了 file 变量中。
2. 创建 FormData 对象
我们需要创建一个 FormData 对象来保存文件。使用 append 方法向 FormData 对象中添加数据，其中第一个参数为 key，第二个参数为 value。我们可以通过 append 方法来添加文件，如下所示：
const formData = new FormData()
formData.append('myfile', this.file)在示例代码中，我们创建了 FormData 对象，并将文件作为 value 添加到 myfile 的 key 中。
3. 发送请求
在我们创建了 FormData 对象之后，我们需要将其发送到服务器。我们将使用 Axios 库发送 AJAX 请求。```Vue.js 中可以全局安装 Axios，在任何组件都可以通过 this.$http 访问。在实现这个功能时，我们会将 Axios 的 post 方法绑定到一个方法中，如下所示：
-- -------------------- ---- -------
-------- -
------------ -
----- -------- - --- ----------
------------------------- ----------
--------------------------------- ----------------------- -- -
---------------------
--
-
-完整代码
-- -------------------- ---- -------
----------
-----
---------------
------ ----------- --------------- -------------------------- --
------- -------------------------------
------
-----------
--------
------ ----- ---- -------
------ ------- -
------ -
------ -
----- ----
-
--
-------- -
------------------ -
--------- - -----------------------------
--
------------ -
----- -------- - --- ----------
------------------------- ----------
---------------------------- ----------------------- -- -
---------------------
-------------- -- -
------------------
--
-
-
-
---------在实际使用中，我们需要通过修改接口地址和 key 的值来适应我们自己的项目需求。
结论
通过使用 FormData 对象和 Axios 套件，我们可以轻松地在 Vue.js SPA 应用中实现图片上传。我们可以使用以上方法扩展我闪 flashcard 等 Vue.js SPA 应用，并让其具备更加丰富的交互和功能。如果你还没有使用 Vue.js 来构建 SPA 应用，那么这篇文章可以作为一个入门，让你了解到 Vue.js 的强大功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6772831e6d66e0f9aada030c