Vue前端压缩图片后上传，拍照上传最佳实践

文章目录

• 一、前言
• 二、使用shrinkpng进行图片压缩
• • 2.1 安装依赖包
  • 2.2 引入包
  • 2.3 开始编码
• 三、网络上建议的其他压缩图片的插件
• • 3.1 vue-image-compressor
  • 3.2 vue-filepond
• 总结

一、前言

最近有一个需求，通过手机拍照后上传图片到服务器，大家应该都知道，现在的手机像素实在是太高了，随便拍一张都是10M以上，直接上传到服务器一方面是浪费存储空间，另外就是特别浪费流量，如果网络不好还很慢。所以想寻求一种前端压缩图片的方案。

在网上找了很多方式效果都不好，要么是根本无法实现功能，要么就是兼容性不好。不过最终找到一个比较完美的插件。
点击可以直接到主页：shrinkpng，话不多说，现在直接讲解怎么使用。

本文基于Vue，VantUI，NPM进行演示。

二、使用shrinkpng进行图片压缩

2.1 安装依赖包

通过下面的命令将shrinkpng库添加到我们自己的项目

npm install shrinkpng

2.2 引入包

在需要的Vue文件中加入如下代码

import { shrinkImage } from "shrinkpng"

2.3 开始编码

在vantui里面使用到van-uploader组件， :before-read="beforeRead"是核心语句，在beforeRead方法里面进行图片的压缩。

<van-cell><van-uploader :after-read="onRead" :before-delete="beforeDelete" v-model="preImg" :before-read="beforeRead"/>
</van-cell>

beforeRead方法实现如下，其中file是一个文件对象，通过shrinkImage方法就能将这个文件进行压缩。

compressImg(file) {return shrinkImage(file, {quality: 15});
},
beforeRead(file) {return this.compressImg(file);
},

quality是压缩质量，1-100之间.通过我自己的项目情况，配置为15基本上就能满足我的要求。将10M+的图片基本上压缩到1M以内。

三、网络上建议的其他压缩图片的插件

3.1 vue-image-compressor

• GitHub链接：https://github.com/Idered/vue-image-compressor
• 安装方法：使用npm安装：npm install vue-image-compressor
• 使用方法：
  • 在Vue组件中引入插件：import vueImageCompressor from 'vue-image-compressor'
  • 注册插件：Vue.use(vueImageCompressor)
  • 使用组件：在template中使用标签
• 功能特点：支持图片压缩、裁剪、旋转等功能，同时提供了丰富的配置选项。

3.2 vue-filepond

• GitHub链接：https://github.com/pqina/vue-filepond
• 安装方法：使用npm安装：npm install vue-filepond filepond-plugin-image-preview filepond-plugin-image-transform
• 使用方法：
  • 在Vue组件中引入插件：import vueFilePond from 'vue-filepond'
  • 注册插件：Vue.use(vueFilePond)
  • 使用组件：在template中使用标签
• 功能特点：支持文件上传和图片处理，可将图片进行压缩、调整大小、剪裁等操作。提供了丰富的配置选项和事件监听。

总结

以上就是今天要讲的内容，本文介绍了Vue前端压缩图片后上传，拍照上传最佳实践，很多时候走了很多弯路都行不通，不过探索的过程还是很美好。希望本篇关于shrinkpng的使用能够提供给有需要的小伙伴。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！