vue图片上传前压缩图片

前言
需求:项目当中上传图片的需求点肯定有很多,再上传之后,如果图片很大的话,在加载的时候就会很慢。最近发现系统首次加载越来越慢,就开始思考怎么能降低这个加载时间,由于首页图片很多,所以图片的大小就需要进行处理,本文记录了上传图片之前压缩图片的各种方法。

一、插件image-conversion

1. 安装依赖:
npm i image-conversion

2.页面当中引入:
import * as imageConversion from 'image-conversion'

3.使用:
//把图片文件作为参数传递到方法中

// 上传之前的钩子函数
beforeUpload(file) {

// 判断是图片
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
console.log('上传头像图片只能是 JPG 或 PNG 格式!');
return false;
}
return new Promise((resolve) => {
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
imageConversion.compressAccurately(file, 100).then(res => {
console.log(res)
resolve(res);
});
})
}

二、canvas
1.上传组件方法:
代码如下(示例):

methods: {

// 文件上传成功

uploadSuccess(res) {

if (res.code === 200) {

this.imgs.push({ name: res.data, url: this.$fileUrl_ + '/' + res.data, path: res.data })

} else {

console.error('文件上传失败', res.msg)

}

},

// 上传文件之前

beforeAvatarUpload(file) {

// 图片大小大于2M进行图片压缩

if (file.size / 1024 / 1024 > 2) {

const that = this

return new Promise(resolve => {

const reader = new FileReader()

const image = new Image()

image.onload = (imageEvent) => {

const canvas = document.createElement('canvas') // 创建画布

const context = canvas.getContext('2d') // 画布为2d

const width = image.width * that.quality // 图片宽度 * 压缩比例

const height = image.height * that.quality // 图片高度 * 压缩比例

canvas.width = width // 画布宽度

canvas.height = height // 画布宽度

context.clearRect(0, 0, width, height)

context.drawImage(image, 0, 0, width, height)

const dataUrl = canvas.toDataURL(file.type) //图片转路径

const blobData = that.dataURLtoBlob(dataUrl, file.type) //图片转二进制

resolve(blobData)

}

reader.onload = e => { image.src = e.target.result }

reader.readAsDataURL(file)

})

} else {

return true

}

},

 

//图片转二进制

dataURLtoBlob(dataURL, type) {

var binary = atob(dataURI.split(',')[1])

var array = []

for (var i = 0; i < binary.length; i++) {

array.push(binary.charCodeAt(i))

}

return new Blob([new Uint8Array(array)], { type: type })

},

// 图片移除

handleRemove(file, fileList) {

const arr = []

fileList.forEach(r => {

arr.push(r.response.data)

})

this.imgs = arr

},

// 图片预览

handlePictureCardPreview(file) {

this.dialogImageUrl = file.url

this.dialogVisible = true

},

}

https://blog.csdn.net/an_jia_ning/article/details/129177011
————————————————
版权声明:本文为CSDN博主「an_jia_ning」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/an_jia_ning/article/details/129177011

posted @ 2023-03-28 16:14  世界险恶你要内心强大  阅读(3002)  评论(1编辑  收藏  举报