项目场景:
提示:这里简述项目相关背景:
最近用uniapp做一个上传图片,要把图片大小压缩到200kb,然后传给后端
插件
image-conversion:一个简单易用的JS图像转换工具,可以指定大小以压缩图像
安装插件
npm i image-conversion --save文章来源:https://www.toymoban.com/news/detail-522665.html
引入
const imageConversion = require(“@/components/image-conversion”);文章来源地址https://www.toymoban.com/news/detail-522665.html
上传图片(将图像压缩到200kb)
// 限制上传图片为200kb
// 限制上传图片为200kb
export function uploadImgCompression(file, urls, tenantId) {
return new Promise((resolve, reject) => {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: function(res) {
// 压缩图片
let name = res.tempFiles[0].name
//返回的是blob格式,后端请求是file格式 如果是blob格式无需转换
// 压缩到200KB,这里的200就是要压缩的大小,可自定义
imageConversion.compressAccurately(res.tempFiles[0], 200).then((res) => {
// 讲blob流转成file
let fileType = new File([res], name, { type: res.type })
if(fileType.name){
var ext = fileType.name.split('.').pop()
}else{
var ext= fileType.split('.').pop()
}
// 获取当前blob流文件的一个内存URL
let blobPath=URL.createObjectURL(fileType)
let fileName = getFileName(file, Imgsrc) +'.'+ ext;
// 请求后台
fileUpload("image", blobPath, fileName, urls, tenantId).then(res => {
console.log(res);
resolve(res)
}).catch(err => {
reject(err)
});
});
}
})
})
}
到了这里,关于uniapp 上传图片时压缩图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!