文件上传是 Web 开发中比较常见的功能之一，Vue.js 也提供了相应的解决方案。本文将介绍如何使用 Vue.js 实现文件上传功能，为 Vue.js 初学者提供指导。
实现步骤
- 安装依赖
文件上传需要使用 axios，因此需要先安装 axios：
npm install axios -S
- 编写组件代码
首先需要在 Vue 组件中引入 axios。
-- -------------------- ---- -------
----------
-----
------ ----------- --------------- -------------------- --
------
-----------
--------
------ ----- ---- -------
------ ------- -
-------- -
------------ -
----- -------- - --- -----------
----------------------- -------------------------------
------------------------- ---------
---------------- -- -
----------------------
--
-------------- -- -
-------------------
---
-
-
-
---------在模板中创建一个 input 元素，设置类型为 file，并设置 ref 属性值为 fileInput。这里使用了文件上传时常用的 FormData 对象，将文件作为数据传递给后端。
在上传事件处理函数 uploadFile 中，创建一个 FormData 对象 formData，并将 input 元素获取到的文件添加到 formData 中。然后使用 axios 发送 POST 请求，将 formData 上传到服务器。
这里需要注意，FormData 的 key 值应该与后端接口的参数名保持一致。
示例代码
完整的组件代码如下：
-- -------------------- ---- -------
----------
-----
------ ----------- --------------- -------------------- --
------
-----------
--------
------ ----- ---- -------
------ ------- -
-------- -
------------ -
----- -------- - --- -----------
----------------------- -------------------------------
------------------------- ---------
---------------- -- -
----------------------
--
-------------- -- -
-------------------
---
-
-
-
---------总结
通过本文介绍，我们了解了如何使用 Vue.js 实现文件上传功能。这里使用了文件上传时常用的 FormData 对象和 axios 库，为初学者提供了一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7a33148841e989441fef2