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: [], // 图片路径ID
imgsUrl: [] // 查看大图
}
}

打开相册

// 打开相册
handleOpenPhoto() {
const _this = this
uni.chooseImage({
success: (chooseImageRes) => {
const imgPaths = chooseImageRes.tempFiles
const 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 = this
Loading.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 = this
uni.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 = 1
if (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)
})
})
})
}
}

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


PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦


公众号

往期文章

个人主页

uniapp小程序图片前端压缩上传的更多相关文章

  1. HTML5 图片本地压缩上传插件「localResizeIMG」

    移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...

  2. CANVAS运用-对图片的压缩上传(仅针对移动浏览器)

    最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...

  3. 微信小程序:多张图片上传

    最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...

  4. Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端

    要搞一个小型的cms内容发布系统 因为小程序上线之后,直接对数据库进行操作的话,慧出问题的,所以一般都会做一个管理系统,让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了 ...

  5. 微信小程序入门八头像上传

    1. action-sheet 底部弹出可选菜单组件 2. wx.uploadFile 将本地资源上传到服务器 3. wx.chooseImage 从本地相册选择图片或使用相机拍照. 4. wx.pr ...

  6. 微信小程序--更换用户头像/上传用户头像/更新用户头像

    changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...

  7. 小程序图片在安卓上拉伸的问题&amp;导航&amp;返回首页

      今天提了一个bug,有几张图片在安卓上面加载会先变大拉伸再恢复正常 出现这样的问题应该是用widthFix造成的 具体原因还不是很清楚,因为都是本地图片,所以我就直接把高也设置好就暂时没有这个问题 ...

  8. 前台图片Canvas压缩上传小结

    需求来源:之前有个提交审核表单的业务,表单中含有大量附件图片,大约有20多张吧,为了省事,采用的同步上传,一次需要上传很多照片,本来单张图片限制为200KB,这样子总图片大小约为5MB左右,想想也可以 ...

  9. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

随机推荐

  1. 浅谈HTTP事务的一个过程

    一个腾讯在职的朋友问道,当我们在浏览器的地址栏输入 www.baidu.com ,然后回车,这一瞬间页面发生了什么?下面以谷歌浏览器一一解释. 一.域名解析 首先Chrome浏览器会解析www.bai ...

  2. Hadoop安装——如何修改端口冲突

    在一个集群中,尽管是多用户,但是端口是公用的,存在冲突的可能.如果另一个用户已经采用默认配置安装了hadoop,那么当前用户再安装hadoop时,必然会产生端口的冲突.在配置自己的hadoop时,可以 ...

  3. Linq学习之旅——LINQ查询表达式

    1. 概述 2. from子句 3. where子句 4. select子句 5. group子句 6. into子句 7. 排序子句 8. let子句 9. join子句 10. 小结 1. 概述 ...

  4. C# SqlBulkCopy数据批量入库

    准备条件:20万+数据 界面设计使用的WPF. 没有对比就没有伤害,以下是我两种方式导入数据案例. 运行 结果对比: 首先使用一般sql语句导入,因为时间原因,我就没有等待程序执行完,但是我记录了大约 ...

  5. Android 自定义控件 轻松实现360软件详情页

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43649913,本文出自:[张鸿洋的博客] 1.概述 最近有不少朋友私聊问应用宝. ...

  6. 【062有新题】OCP 12c 062出现大量之前没有的新考题-16

    choose one Which users are created and can be used for database and host management of your DBaaS da ...

  7. asp.net webform 当前上下文中不存在名称“__o”

    错误 CS0103 当前上下文中不存在名称“__o” 最近在搞一个webform项目, 再页面写了点<%%>代码, 结果编译下居然出现了这个错误 炸裂啊,  这是什么毛线, 看起来是 In ...

  8. 浅析 Hadoop 中的数据倾斜

    转自:http://my.oschina.net/leejun2005/blog/100922 最近几次被问到关于数据倾斜的问题,这里找了些资料也结合一些自己的理解. 在并行计算中我们总希望分配的每一 ...

  9. APUE学习笔记6——线程和线程同步

    1 概念 线程是程序执行流的最小单元.线程是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但它可与同属一个进程的其它线程共享进程所拥有的 ...

  10. 18.查询效率最高的unordered_map

    #include <string> #include <iostream> //查询性能最高 //增删查改与map是一样的,但是本质区别就是unordered_map底层是ha ...