说明
因为图片比较大,为了减轻服务器压力,所以想压缩了再上传.
用到的是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);
};
});
}
本文暂时没有评论,来添加一个吧(●'◡'●)