前端压缩图片方案

说明

因为图片比较大,为了减轻服务器压力,所以想压缩了再上传.
用到的是compressorjs这个库

还有一个库也不错可以自定义压缩图片大小
image-conversion
参考地址:Element-ui 上传图片前压缩图片_elementui图片上传前压缩_an_jia_ning的博客-CSDN博客

安装

npm i compressorjs

Github地址:https://github.com/fengyuanchen/compressorjs/blob/main/README.md#main
使用说明也在里面

使用

代码中使用

<view class="invitation" id="invitation">
	<view class="file" @click="upload">
		点我上传文件
	</view>
	<img :src="`data:image/jpeg;base64,${posterUrl}`" class="bg-img"></img>
</view>

import {readFile,compressImg} from './index.js'
export default {
	data() {
		return {
			posterUrl: '',
		};
	},
	methods: {
		async upload() {
			// 选择图片文件
			const res = await uni.chooseFile({
				count: 10,
				type: 'image'
			});
			console.log(res.tempFiles[0]);
			const tem = await compressImg(res.tempFiles[0]);
			console.log('tem',tem);
			//这里我是转称base64格式,如果不需要可以不转直接传到服务器
			const base64 = await readFile(tem);
			console.log('base64',base64);
			this.posterUrl = base64;
		}
	}
}

我把它放到一个index.js文件内,需要用到引入就行了

import Compressor from 'compressorjs';
/**压缩图片
 * @param {Object} file
 */
export function compressImg(file) {
	return new Promise((resolve, reject) => {
		new Compressor(file, {
			quality: 0.6,//压缩质量:0-1
			maxWidth: 800,//最大宽度
			maxHeight: 800,//最大高度
			//压缩过程是异步的，
			//这意味着你必须在success钩子函数中访问result。
			success(result) {
				resolve(result)
			},
			error(err) {
				console.log(err.message);
				reject(err.message)
			}
		})
	})
}

/**
 * 将file数据转换为base64
 * @param {Object} file
 */
export function readFile(file) {
	return new Promise(function(resolve, reject) {
		let reader = new FileReader();
		reader.readAsArrayBuffer(file);
		reader.onload = function() {
			let base64String = btoa(
				new Uint8Array(reader.result)
				.reduce((data, byte) => data + String.fromCharCode(byte), '')
			);
			resolve(base64String);
		};
	});
}