Vue.js 中如何实现图片上传功能的完整实例
图片上传是前端开发中非常常见的功能之一，我们经常需要在页面上上传用户的头像、商品图片等等。在 Vue.js 中，有很多现成的第三方库可以直接使用，比如 vue-upload-component、vue-simple-uploader 等。不过，本文将从原生的角度为大家介绍 Vue.js 中如何实现图片上传的完整实例。
- 使用
input[type="file"]元素进行上传
在 Web 开发中，input[type="file"] 元素可以实现文件上传功能，我们可以通过 @change 监听其值变化事件，获取上传的文件对象。样例代码如下：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------------------- --
------- -------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -----
--
--
-------- -
---------------------------- -
--------- - ----------------------
--
------------------ -
----- -------- - --- -----------
----------------------- -----------
-- ------
--
--
--
---------上述代码中，我们监听了 input[type="file"] 元素的值变化事件，将选择的文件对象保存在组件数据的 file 属性中。点击上传按钮时，我们构造一个 FormData 对象，将 file 属性作为参数传递进去，然后使用相关的请求库发起上传请求即可。
- 对上传图片进行预览
在处理图片上传时，通常需要对上传的图片进行预览，以便用户确认上传的图片是否正确。在 Vue.js 中，可以通过使用 URL.createObjectURL() 方法生成图片预览地址，再将其赋值给 img 标签的 src 属性。样例代码如下：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------------------- --
---- ----------------- ----------------- --
------- -------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -----
----------- -----
--
--
-------- -
---------------------------- -
----- ---- - ----------------------
--------- - -----
-- --------
--------------- - --------------------------
--
------------------ -
----- -------- - --- -----------
----------------------- -----------
-- ------
--
--
----------- -
-- ------
-- ----------------- -
-------------------------------------
-
--
--
---------上述代码中，我们在 handleFileInputChange 方法中使用 URL.createObjectURL() 方法生成图片预览地址，并将其保存在组件数据的 previewUrl 属性中。在模板中，我们使用 v-if 判断 previewUrl 属性是否存在，如果存在就显示图片预览。
需要注意的是，由于是通过 URL.createObjectURL() 方法生成的地址，因此在销毁组件时需要使用 URL.revokeObjectURL() 方法将其销毁，以释放浏览器内存。
- 图片上传进度条提示
在上传大文件时，用户体验常常是一个非常重要的问题，我们需要给用户实时反馈上传进度信息。在原生的 XMLHttpRequest 对象中，我们可以监听 upload 事件，获得上传进度信息。使用 XMLHttpRequest.upload.addEventListener 添加一个 progress 事件监听器，可以在上传过程中获取上传进度信息。样例代码如下：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------------------- --
---- ----------------- ----------------- --
------- -------------------------------------
---- -----------------
------- -------------- ---
------
------
-----------
--------
------ ------- -
------ -
------ -
----- -----
----------- -----
---------- ------
--------------- --
--
--
-------- -
---------------------------- -
----- ---- - ----------------------
--------- - -----
-- --------
--------------- - --------------------------
--
------------------ -
-------------- - -----
----- -------- - --- -----------
----------------------- -----------
----- --- - --- -----------------
-- -----------
--------------------------------------- ------- -- -
-- ------------------------ -
------------------- - ------------------------ - ------------ - -----
-
---
---------------- --------------
------------------------------------ -----------------------
---------------------- - -- -- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
-------------------
--
--
----------- -
-- ------
-- ----------------- -
-------------------------------------
-
--
--
---------在上述代码中，我们使用类似上文中的方式发起上传请求，不过我们添加了 XMLHttpRequest.upload.addEventListener 方法，在 progress 事件触发时更新 uploadProgress 属性，在模板中显示上传进度信息。需要注意的是，只有在 event.lengthComputable 为 true 时才能计算上传进度。
- 使用 Axios 进行图片上传
在实际的开发中，我们通常会选择使用第三方库 Axios 发起请求，以便处理更多的请求场景。Axios 是一个非常流行的 HTTP 请求库，它支持 Promise API、取消请求、拦截请求和响应、转换请求和响应数据等特性，非常适合用于处理请求。
上传图片时，我们可以通过构造一个 FormData 对象，并将具体的表单数据附加上去，然后使用 axios.post 方法发起请求。上传进度的处理与上文类似，不过我们可以直接使用 Axios 的 onUploadProgress 配置，省去了手动监听的代码。完整代码如下：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------------------- --
---- ----------------- ----------------- --
------- -------------------------------------
---- -----------------
------- -------------- ---
------
------
-----------
--------
------ ----- ---- --------
------ ------- -
------ -
------ -
----- -----
----------- -----
---------- ------
--------------- --
--
--
-------- -
---------------------------- -
----- ---- - ----------------------
--------- - -----
-- --------
--------------- - --------------------------
--
------------------ -
-------------- - -----
----- -------- - --- -----------
----------------------- -----------
-- ----
------------------------ --------- -
-------- - --------------- --------------------- --
----------------- --------------- -- -
-- -------------------------------- -
------------------- - -------------------------------- - -------------------- - -----
-
--
------------------ -- -
---------------------------
---------------- -- -
---------------------
------------- -- -
-------------- - ------
---
--
--
----------- -
-- ------
-- ----------------- -
-------------------------------------
-
--
--
---------- 总结
图片上传是一个非常常见的需求，本文为大家介绍了 Vue.js 中如何通过原生的 XMLHttpRequest 对象和 Axios 发起图片上传请求，并对上传进度进行了简单的处理。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64929caa48841e98940667ef