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({ 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压缩图片上传内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/youmi_sunshine/article/details/1260562
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了C#从数据库读取图片并保存的方法,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2021-01-16
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
- php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
- 这篇文章主要介绍了Go语言压缩和解压缩tar.gz文件的方法,实例分析了使用Go语言压缩文件与解压文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-05-03
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 图片剪裁是常用的方法,那么如何通过4坐标剪裁图片,本文就详细的来介绍一下,感兴趣的小伙伴们可以参考一下...2021-06-04
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04