1，前言

这次项目中做了一个图片上传，要求是大于2MB的就压缩成2MB一下的再上传，我这边利用了uniapp的文件接口，使用canvas做了一个压缩上传的功能，目前已上线，使用无问题。

2，实现代码

定义canvas

<canvas canvas-id="imgCanvas" class="imgCanvas" />

canvas样式

.imgCanvas{position: absolute;top: -100%;width: 100%;height: 100%;
}

定义数据

// 引入图片压缩的方法
import { imgCompress } from '../../utils/index.js'
// 定义2MB
const Limit = 1024 * 1024 * 2
// 页面数据
data() {return {imgsPath: [], // 图片路径IDimgsUrl: [] // 查看大图}
}

打开相册

// 打开相册
handleOpenPhoto() {const _this = thisuni.chooseImage({success: (chooseImageRes) => {const imgPaths = chooseImageRes.tempFilesconst successUp = 0 // 成功计数const failUp = 0 // 失败计数const count = 0 // 第几张const total = imgPaths.length // 当前已上传个数// 调用上传方法_this.recursionUploading(imgPaths, successUp, failUp, count, total)},fail: (error) => {console.warn(error)}})
}

递归上传

/*** 递归上传* @param {String} imgPaths 上传的图片地址* @param {String} successUp 成功个数* @param {String} failUp 失败个数* @param {String} count 当前第几张* @param {String} total 总数*/
async recursionUploading(imgPaths, successUp, failUp, count, total) {const _this = thisLoading.hide()Loading.show(`上传第${count + 1}张...`)let initPath = imgPaths[count].path// 如果超过2MB就压缩if (imgPaths[count].size > Limit) {Loading.hide()Loading.show(`第${count + 1}张压缩中...`)initPath = await imgCompress.getCompressImage(imgPaths[count], 2)}uni.uploadFile({header: {'content-type': 'multipart/form-data','channel': '3','token': app.globalData.user.userToken},url: `${app.globalData.baseURL}/oss/uploadFile`,filePath: initPath,name: 'file',formData: {segmentId: 'WKDPE'},success: (uploadFileRes) => {const res = JSON.parse(uploadFileRes.data)if (res.code === '00000') {_this.imgsPath.push({path: imgPaths[count].path,fileId: res.data.fileId})_this.imgsUrl.push(imgPaths[count].path)successUp++ // 成功+1} else {failUp++}},fail(e) {failUp++ // 失败+1},complete(res) {const data = JSON.parse(res.data)if (data.code === '99990') {uni.removeStorageSync('userInfo')uni.removeStorageSync('user')app.globalData.user = {}app.globalData.userInfo = {}Toast(data.message)setTimeout(() => {uni.reLaunch({url: '../login/index'})}, 1000)return}count++ // 下一张if (count == total) {Toast(`上传结束，总共${count}张，失败${failUp}张 !`)} else {// 递归调用，上传下一张_this.recursionUploading(imgPaths, successUp, failUp, count, total);}}})
}

删除照片

/*** 删除照片* @param {String} id 图片id*/
deleteImg(id) {const index = this.imgsPath.findIndex(item => {return item.fileId === id})this.imgsPath.splice(index, 1)
}

预览大图

/*** 预览大图* @param {String} url 图片地址* @param {String} index 当前图片下标*/
handlePreviewImage(url, index) {const _this = thisuni.previewImage({urls: _this.imgsUrl,current: index,longPressActions: {itemList: ['发送给朋友', '保存图片'],success: function(data) {console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片')},fail: function(err) {console.log(err.errMsg)}}})
}

压缩图片

/*** 压缩图片* @param {Object} file { path: '', size: '' }* @param {Number} limitSize 压缩目标 MB*/
export const imgCompress = {MB: 1024 * 1024,canvasId: 'imgCanvas',ctx: uni.createCanvasContext('imgCanvas'),// 获取可使用窗口宽度(提前使用uni.getSystemInfo获取windowWidth存在globalData)rpxToPx(number) {return number / 750 * getApp().globalData.systemInfo.windowWidth},// 获取文件信息getFileInfo(path) {return new Promise((resolve, reject) => {uni.getFileInfo({filePath: path,success: (res) => {console.log('File Size =>', `${res.size / this.MB}MB`)resolve(res.size)},fail: () => reject(null)})})},// 获取图片信息getImageInfo(path) {return new Promise((resolve, reject) => {uni.getImageInfo({src: path,success: (res) => resolve(res),fail: () => reject(null)})})},// 判断是否达到压缩目标getCompressImage(file, limitSize) {if (file.size > this.MB * limitSize) {return this.calcImaeg(file.path, limitSize);} else {return file.url}},// 递归async calcImaeg(url, limitSize) {const size = await this.getFileInfo(url)if (size > this.MB * limitSize) {const imageInfo = await this.getImageInfo(url)var maxSide = Math.max(imageInfo.width, imageInfo.height);var windowW = this.rpxToPx(750)var scale = 1if (maxSide > windowW) {scale = windowW / maxSide;}var imageW = Math.floor(imageInfo.width * scale)var imageH = Math.floor(imageInfo.height * scale)const newPath = await this.getCanvasImage(url, imageW, imageH)return this.calcImaeg(newPath, limitSize)} else {return url}},// 绘画getCanvasImage(imagePath, imageW, imageH) {return new Promise((resolve, reject) => {this.ctx.drawImage(imagePath, 0, 0, imageW, imageH)this.ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: this.canvasId,x: 0,y: 0,width: imageW,height: imageH,quality: 1,success: (res) => resolve(res.tempFilePath),fail: () => reject(imagePath)})})})}
}

如果看了觉得有帮助的，我是@鹏多多i，欢迎点赞关注评论；
END

往期文章

助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
助你上手Vue3全家桶之Vue-Router4教程
超详细！Vue的九种通信方式
超详细！Vuex手把手教程
使用nvm管理node.js版本以及更换npm淘宝镜像源
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
超详细！Vue-Router手把手教程

个人主页

CSDN
GitHub
简书
博客园
掘金

uniapp小程序图片前端压缩上传相关推荐

小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
微信小程序图片前端压缩（canvas）
将需要压缩的图片绘制在canvas,然后利用微信提供的canvasToTempFilePath()方法保存成一个图片,保存时可以根据所需指定生成图片的质量. 通过canvas配合这个接口,可以实现两种 ...
uni-app小程序实现视频压缩及上传
下面两张图是中的第一张图是选择视频进行上传,第二张图是视频上传后的展示操作这里是有完成选择视频上传压缩,展示选择视频: 上传视频后: 这个整体的思路是选择视频压缩并上传全部代码: <tem ...
微信小程序图片旋转后上传
今天遇到一个很有意思的问题,在开发电子签名的时候,生成的图片角度有问题,需要进行旋转.然而js里并没有旋转图片的api,所以突发奇想把canvas生成的图片再插入进一个新的canvas容器进行编辑旋转 ...
微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...

uniapp小程序图片前端压缩上传

目录

1，前言

2，实现代码

uniapp小程序图片前端压缩上传相关推荐

最新文章

热门文章