Vue.js怎么实现文件上传压缩优化
导读：本文共4989.5字符，通常情况下阅读需要17分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：希望大家仔细阅读，能够学有所成！vue js实现文件上传压缩优化处理两种方法 ：第1种是借助canvas的封装的文件压缩上传第2种（扩展方法）使用compressorjs第三方插件实现下面来详细介绍两种方法：借助canvas的封装的文件压缩上传封装之前，先要对canvas相关的方法有所了解<canvas>简单实例如下:<canvasid="myCanvas"w... ...
目录
(为您整理了一些要点),点击可以直达。
希望大家仔细阅读，能够学有所成！
两种方法 ：
第1种是借助canvas的封装的文件压缩上传
第2种（扩展方法）使用compressorjs第三方插件实现
下面来详细介绍两种方法：
封装之前，先要对canvas相关的方法有所了解
<canvas>简单实例如下:
注意:标签通常需要指定一个id属性 (或者其他), width 和 height 属性定义的画布的大小.
使用 style 属性来添加边框:
将base64转换为file文件
使用canvas的方法实现（拓展）
drawImage() 方法在画布上绘制画布。
在画布上定位图像：
在画布上定位图像，并规定图像的宽度和高度：剪切图像，并在画布上定位被剪切的部分：
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为png格式
option表示0到1之间的取值，选定图片的质量，默认值是0.92
导出方法imgZip
main.js
这里使用了vant ui框架，实现的头像上传，如果用原生的input file方法也是一样的使用方式
限制上传数量
通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
禁用文件上传
通过disabled属性禁用文件上传。
限制上传大小图片
上传之前的图片验证
afterCard方法，当提交了头像，先进行压缩处理，再去把formData文件流 作为参数调用接口，
获取到后台返回的图片路径，再调用更新头像接口，把获取的数据赋值显示头像的img.
如果这里使用原生的input file,可按照如下操作
示例：
});
使用compressorjs第三方插件实现
compressorjs 是一个开源的图片处理库，提供了图片压缩、图片旋转等能力
语法：
ImageCompressor.js
quality:quality || 0.6, //压缩质量，图片压缩比 0-1
此插件还能解决ios移动端拍照图片翻转90度问题
这里记得使用 async await，注意使用的file取值，与第一种的方法有所不同
},
如果这里使用原生的input file,可按照如下操作
示例：
});
本文：Vue.js怎么实现文件上传压缩优化的详细内容，希望对您有所帮助，信息来源于网络。