uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)
我在做uniapp项目时，用的uni-file-picker组件，这是我做的一个项目实例，主要是将图片通过接口传至后台服务器
如果只是上传一张照片的话 还没有什么大问题，但是如果一连上传很多个图片，像我这个项目一样，而且有的图片特别大，我这边遇到一个上传照相机的照片就有10兆多，有的手机内存不足，临时空间不够，就会出现白屏的情况。
解决方法：
一、先开启uni-file-picker组件里对于压缩图片的配置项 sizeType，默认是有两个选项的：
- original ：正常
- compressed：压缩
这是组件源码里显示传参的参考：
sizeType: {
type: Array,
default () {
return ['original', 'compressed']
}
},所以在调用uni-file-picker组件时，就可以进行设置，如下：
<uni-file-picker v-model="mentouValue" return-type="object"
fileMediatype="image" mode="grid" :sourceType="sourceType"
:sizeType="sizeType" :auto-upload="false"
@select="mentouSelect" @delete="mentouDelete"/> :sizeType="sizeType" 表示的是压缩图片的设置
data中设置sizeType的值：
export default {
data() {
return{
mentouValue:{}, //图片value值
sizeType:['compressed'], //设置图片压缩
sourceType:['camera'], //这里设置的是只能使用照相机，不能从相册里传照片
}
},
}通过以上设置，可以实现对图片进行压缩 一般是对半压缩的，比如5兆压缩成2.5兆左右这样的。
如何进行检验：本地是检验不出来的，需要拿手机进行真机调试，才可以看出来文件压缩后的大小
如果对图片大小没有太大限制 ，直接这样压缩就可以了，但是有的项目会限制对图片的大小必须小于1兆，这时候，光有这个设置，就满足不了需求了，这时候我们可以再采取一点措施
二、将图片再次进行压缩，压缩至1兆以下，再传至服务器中：
1、先创建一个方法imageCompress，一般单独放在公共函数里
// 图片压缩递归，小于1M跳出
export function imageCompress(file){
return new Promise((resolve, reject)=>{
let { size,path } = file
let type = path.split(".")[1]
//大于1M进行压缩，
if(size< (1024*1024)){
resolve(file)
return false
}
uni.compressImage({
class="lazy" data-src: path,
quality: 80,
success: res => {
let newPath = res.tempFilePath+type
let newName = res.tempFilePath.split("/")[res.tempFilePath.split("/").length-1]+type
uni.getFileInfo({
filePath:res.tempFilePath,
success:async (info)=>{
let newFile = {...file,size:info.size,path:newPath,name:newName,tempFilePath:res.tempFilePath}
resolve(await imageCompress(newFile))
}
})
}
})
})
}2、调用uni-file-picker组件的页面中，调用该方法，然后再上传图片
import { imageCompress } from "@/utils/index.js"
import { baseUrl } from "@/utils/request"
export default {
data() {
return{
mentouValue:{}, //图片value值
sizeType:['compressed'], //设置图片压缩
sourceType:['camera'], //这里设置的是只能使用照相机，不能从相册里传照片
file:{},
type:''，
workId:''
}
},
onLoad(option) {
this.workId = option.workId
},
methods:{
//选择照片
mentouSelect(e){
this.timeSeting()
if(e.tempFilePaths&&e.tempFiles){
this.file = e.tempFiles[0].file
this.type = 'mentou'
this.toUpload()
}
},
// 删除照片
mentouDelete(e){
this.mentouValue = {}
},
// 上传照片
async toUpload(){
// 压缩图片
this.file = await imageCompress(this.file)
// 要传的参数
let params = {
file:this.file,
type: this.type,
workId:this.workId
}
// 上传图片到相依的接口
uni.uploadFile({
url: baseUrl+'/app/uploadImage', //这里为拼接的接口地址
filePath: this.file.tempFilePath?this.file.tempFilePath:this.file.path,
fileType: "image",
formData:{...params},
name: 'file',
header: {
'content-type': 'multipart/form-data',
"Authorization": uni.getStorageSync('Authorization'),
"refToken": uni.getStorageSync('refToken')
},
success: uploadFileRes => {
let imageName = JSON.parse(uploadFileRes.data).data
// 这里可以对返回的参数进行处理了
uni.showToast({ title: '上传成功', icon: "success" });
},
fail(err) {
uni.showToast({ title: '上传失败', icon: "error" });
}
})
},
}
}
这样写完后，图片就会被压缩至1兆以下，然后再传给后端了，亲测有效哦
到此这篇关于uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内的文章就介绍到这了,更多相关uniapp压缩图片上传内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
