【前端Canvas】Vue+Vant Uploader 实现图片文件压缩上传

最新推荐文章于 2024-06-13 09:08:02 发布

素心2020

最新推荐文章于 2024-06-13 09:08:02 发布

阅读量1.5k

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_44683095/article/details/106291236

版权

vant官网时常连接超时：vant源码

需求

base64传输图片。
限量图片数9。
上传图片超过1 * 1024 * 1024 byte就压缩。

结果

3M的图片压缩到70KB，上传输效率提高了十倍。

代码

					<!--需求：base64传输图片。限量图片数9。上传图片超过1*1024*1024 byte就压缩。-->
					<van-uploader v-model="tempFiles" multiple accept="image/*,video/*" :after-read="afterReaderFiles" :max-count="9">
					</van-uploader>
					<!--查看压缩之后的图片:还原组件回显图片样式，预览-->
					<div>
						<img :src="item" v-for="(item,index) in pressImgUrl" :key="index"
						     @click=<