在移动端开发中，上传图片是非常常见的功能。然而，由于移动设备摄像头拍摄出来的图片分辨率通常比较高，因此需要对图片进行压缩以减小文件大小，避免上传过程中出现卡顿等问题。本文将介绍如何使用 Vue.js 2.0 实现移动端拍照压缩图片上传预览功能。
准备工作
在开始编写代码之前，需要先安装依赖。具体而言，需要安装以下两个库：
- exif-js: 用于读取图片的元数据。
- compressorjs: 用于压缩图片。
可以通过 npm 安装这两个库：
--- ------- ------- ------------ ------
实现步骤
1. 绑定 input[type=file]
首先，需要在页面中创建一个 input[type=file] 元素，并将其绑定到 Vue 实例中的 data 中：
----------
-----
------ ----------- ---------------- --------------- ---------------------------
------
-----------
--------
------ ------- -
----- ----------------
------ -
------ -
----- ----
-
--
-------- -
------------------ -
--------- - -----------------------------
-
-
-
---------2. 读取图片元数据
接下来，需要使用 exif-js 库读取图片的元数据。在 handleFileChange 方法中添加以下代码：
------ ---- ---- ---------
------------------ -
--------- - -----------------------------
----- ------ - --- ------------
------------- - ------- -- -
----- ----- - --- -------
--------- - -------------------
------------ - -- -- -
------------------- ---------- -
------------------------------
--
-
-
-------------------------------
-上述代码创建了一个 FileReader 实例，用于读取文件内容并转换为 data URL 格式。然后创建一个 Image 实例，将 data URL 赋值给其 src 属性，并在其 onload 回调函数中使用 exif-js 库读取图片元数据。
3. 压缩图片
接下来，需要使用 compressorjs 库对图片进行压缩。在 handleFileChange 方法中添加以下代码：
------ ---- ---- ---------
------ ---------- ---- --------------
------------------ -
--------- - -----------------------------
----- ------ - --- ------------
------------- - ------- -- -
----- ----- - --- -------
--------- - -------------------
------------ - -- -- -
------------------- ---------- -
--- ----------------- -
-------- ----
--------- ----
-------- -------- -- -
-------------------
--
------ ----- -- -
--------------------------
--
--
--
-
-
-------------------------------
-上述代码中，使用 Compressor 构造函数创建一个压缩器实例。其中 quality 属性指定了压缩图片的质量，maxWidth 属性指定了压缩后图片的最大宽度。success 回调函数将在压缩成功后被调用，其参数 result 即为压缩后的图片数据。error 回调函数将在压缩失败时被调用，其参数 err 包含了错误信息。
4. 预览压缩后的图片
最后，需要将压缩后的图片显示在页面上。可以通过添加一个 img 元素来预览图片：
----------
-----
------ ------
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------