vue实现文件上传压缩优化处理

vue js实现文件上传压缩优化处理

两种方法 ：

• 第1种是借助canvas的封装的文件压缩上传
• 第2种（扩展方法）使用compressorjs第三方插件实现

目录

vue js实现文件上传压缩优化处理

 借助canvas的封装的文件压缩上传

1.新建imgUpload.js

2.全局引入封装的方法

3.页面中使用

 使用compressorjs第三方插件实现

1.compressorjs安装

2.方法封装

2.页面使用

3.头像上传处理

---

下面来详细介绍两种方法：

 借助canvas的封装的文件压缩上传

封装之前，先要对canvas相关的方法有所了解 

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (或者其他), width 和 height 属性定义的画布的大小.

使用 style 属性来添加边框:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

1.新建imgUpload.js