首页 > Web开发 > 详细

前端上传图片到oss,压缩图片后上传至oss

时间:2019-12-07 18:13:39      阅读:347      评论:0      收藏:0      [点我收藏+]

上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度。

 /**
* 压缩图片
* @param file 图片文件
* @param callback 回调函数,压缩完要做的事,例如ajax请求等。
*/
compressFile(file,callback){
let fileObj = file;
let reader = new FileReader()
reader.readAsDataURL(fileObj) //转base64
reader.onload = function(e) {
let image = new Image() //新建一个img标签(还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
let canvas = document.createElement(‘canvas‘), // 新建canvas
context = canvas.getContext(‘2d‘),
imageWidth = image.width / 4, //压缩后图片高度和宽度
imageHeight = image.height / 5,
data =‘‘;
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL(‘image/jpeg‘,0.1) // 0.1压缩至以前的0.1倍
let arr = data.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1], // 转成blob
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let files = new window.File([new Blob([u8arr], {type: mime})], ‘test.jpeg‘, {type: ‘image/jpeg‘}) // 转成file
callback(files) // 回调
}
}
},
图片压缩完毕后就会毁掉callback函数

技术分享图片

 

上传拿到文件进行判断大小是否需要压缩。需要压缩就使用压缩方法,通过回调函数进行操作。

这里需要特别注意,因为我使用的是iview,一直习惯了this方法调用函数,如果在这里函数调用函数的话,此this非彼this,所以就需要使用$this来进行接收外面的this,从而调用外面的uploads函数方法。

依赖阿里云的

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

封装密钥

技术分享图片

 

进行图片上传

技术分享图片

 

参数分别是文件名字,和文件

 

 

 

前端上传图片到oss,压缩图片后上传至oss

原文:https://www.cnblogs.com/xiao1993/p/12002806.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!