如何使用Vue封装Promise实现图片压缩预览及上传功能？

本文共计2080个文字，预计阅读时间需要9分钟。

本文以实例展示了如何使用Vue实现图片压缩预览及上传的功能，并附上相关代码和参考。

主要应用到的H5 API有：`FileReader`、`Canvas`以及`FormData`。整个过程大致分为三个步骤：

1. 使用`input`元素的`file`类型让用户上传图片；

2.使用`FileReader`读取图片，并将其转换为`DataURL`；

3.将`DataURL`转换为`Canvas`对象，并利用Canvas的压缩功能进行压缩；

4.最后将压缩后的图片通过`FormData`对象进行上传。

以下为具体代码示例：

vue

以上代码展示了如何使用Vue实现图片压缩预览及上传的功能。主要应用了`FileReader`、`Canvas`以及`FormData`这三个H5 API，并通过三个步骤完成了整个流程。

本文实例为大家分享了vue实现压缩图片预览并上传的具体代码，供大家参考，具体内容如下

主要用到filereader、canvas 以及 formdata 这三个h5的api

过程大致分为三步：

用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）
把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩
获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpRequest提交formdata。