【uniapp】uniapp 使用uView框架 upload组件压缩图片
tips:如果本文对你有用，请爱心点个赞，提高排名，让这篇文章帮助更多的人。谢谢大家！比心❤~
如果解决不了，可以在文末加我微信，进群交流。
技术选型
- 开发框架： uniapp
- 主题UI框架： uView
背景
uView框架upload文件上传组件中没有h5端控制压缩的参数，超出文件大小也没有响应的提示，但是一般的上传文件场景，是需要控制文件大小的。
效果图
原图是4.8M，长宽为：3024*4032
封装图片压缩工具方法
- 封装util.js
// 图片压缩
/**
* imgSrc 地址
* scale 压缩质量 0-1
* type 文件类型
*/
export function compressImg(imgSrc, scale, type, callback) {
// uni.$u.toast('压缩中')
var img = new Image();
img.src = imgSrc;
img.onload = function() {
var that = this;
var h = (img.height * scale).toFixed(0); // 默认按质量比例压缩
var w = (img.width * scale).toFixed(0);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = document.createAttribute("width");
width.nodeValue = w;
var height = document.createAttribute("height");
height.nodeValue = h;
canvas.setAttributeNode(width);
canvas.setAttributeNode(height);
ctx.drawImage(that, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg', scale); //压缩比例
canvas = null;
if (type == 'base64') {
let data = {
size: getBase64Size(base64),
type: type,
source: base64
}
callback(base64);
} else {
let blob = base64ToBlob(base64);
// console.log('压缩后的大小', blob, blob.size, blob.type)
const blobUrl = window.URL.createObjectURL(blob); //blob地址
blob.source = blobUrl
callback(blob);
}
}
}
// base转Blob
export function base64ToBlob(base64) {
var arr = base64.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
// 获取base64的文件大小
export function getBase64Size(base64Str) {
let size = 0;
if (base64Str) { // 获取base64图片byte大小
const equalIndex = base64Str.indexOf('='); // 获取=号下标
if (equalIndex > 0) {
const str = base64Str.substring(0, equalIndex); // 去除=号
const strLength = str.length;
const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
size = Math.floor(fileLength); // 向下取整
} else {
const strLength = base64Str.length;
const fileLength = strLength - (strLength / 8) * 2;
size = Math.floor(fileLength); // 向下取整
}
} else {
size = null;
}
return size
} index.vue中引入util.js，并在上传时使用
<template>
<view class="components-wrap">
<u-form-item class='form-item-box' labelWidth='auto' :prop="column.name" borderBottom :ref="column.name">
<u-upload class="upload-wrap" width="102" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
:sizeType="sizeType" @clickPreview="clickPreview" :name="column.name" multiple :disabled="disabled"
:formkey="formkey">
<view class="material-add">
<u-button class='upload-btn' :disabled="disabled" text="上传图片"></u-button>
</view>
</u-upload>
</u-form-item>
</view>
</template>
<script>
import {
compressImg
} from '@/utils/util.js'
export default {
data() {
return {
currentValue: false,
fileList: [],
sizeType: ['compressed'],
fileMaxSize: 2 * 1024 * 1024, // 默认最大为2M
fileMinSize: 50 * 1024 // 最小为50KB
}
},
methods: {
clickPreview(url, lists, name) {
console.log('预览图片', url, lists, name)
},
getCompressionRatio(fileSize) {
const multiple = (fileSize / this.fileMaxSize).toFixed(2) // 获取文件大小倍数，生成质量比
let compressionRatio = 1
if(multiple > 5) {
compressionRatio = 0.5
} else if (multiple > 4) {
compressionRatio = 0.6
} else if (multiple > 3) {
compressionRatio = 0.7
}else if (multiple > 2) {
compressionRatio = 0.8
} else if (multiple > 1) {
compressionRatio = 0.9
} else {
compressionRatio = 2
}
return compressionRatio;
},
// 新增图片
async afterRead(event) {
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList`].length
for (let index in lists) {
const item = lists[index]
const fileSize = item.size
const fileName = item.name ?? ''
if (fileSize > this.fileMaxSize) {
const compressionRatio = this.getCompressionRatio(fileSize)
if (compressionRatio > 1) {
uni.$u.toast('文件' + fileName + '大于10M')
return false
}
// 自动压缩图片'
await this.compressImg(item, compressionRatio)
if (item.size > this.fileMaxSize) {
uni.$u.toast('文件' + fileName + '压缩后超出2M')
return false
}
}
if (item.size < this.fileMinSize) {
uni.$u.toast('文件' + fileName + '不能小于50KB')
return false
}
this[`fileList`].push({
...item,
status: 'uploading',
message: '上传中'
})
}
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
// 垃圾回收
window.URL.revokeObjectURL(lists[i].url)
console.log('上传结果', result)
let item = this[`fileList`][fileListLen]
this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '上传成功',
url: result
}))
fileListLen++
}
},
compressImg(source, compressionRatio) {
return new Promise((resolve, reject) => {
compressImg(source.url, compressionRatio, source.type, compressRes => {
resolve(compressRes);
})
}).then((res) => {
source.size = res.size
// window.URL.revokeObjectURL(source.url) // 删除被压缩的缓存文件,这里注意，如果是相册选择上传，可能会删除相册的图片
source.url = res.source
source.thumb = res.source
return source
}).catch(err => {
console.log('图片压缩失败', err)
})
},
uploadFilePromise(url) {
let that = this
return new Promise((resolve, reject) => {
const uploadTask = uni.uploadFile({
url: uploadUrl,
filePath: url,
name: 'file',
header: {
"blade-auth": "Bearer xxxxxxxxxxxxx",
"tenantCode": tenantCode
},
success: (uploadFileRes) => {
if (uploadFileRes.statusCode === that.Response.OK) {
const data = JSON.parse(uploadFileRes.data)
if (data.code === that.Response.OK) {
console.log('form components upload uploadFilePromise onchange',
uploadFileRes)
let fileId = data.data[0].id;
const sourceUrl = 'https://xxxxxxx/download-document/id/' + fileId;
that.data.value.push({
id: fileId,
name: data.data[0].name,
source: sourceUrl
});
// 添加图片数量
that.data.count = that.fileList.length
that.$emit('change', that.data, that.formkey)
setTimeout(() => {
resolve(sourceUrl)
}, 500)
} else {
uni.showToast({
title: data.msg,
icon: 'none',
duration: that.ShowToast.DURATION
});
}
} else {
console.log(uploadFileRes)
uni.showToast({
title: '上传失败',
icon: 'none',
duration: that.ShowToast.DURATION
});
}
},
fail(error) {
// reject(false)
uni.$u.toast(error.errMsg)
console.log('图片上传失败', error)
}
});
// uploadTask.onProgressUpdate((res) => {
// console.log('上传进度' + res.progress);
// console.log('已经上传的数据长度' + res.totalBytesSent);
// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
// // 测试条件，取消上传任务。
// if (res.progress > 50) {
// uploadTask.abort();
// }
// });
})
},
}
}
<script/> 有问题请添加个人微信:【mengyilingjian】,进群一起技术讨论。添加时请备注来意，谢谢！