Element-ui 上传图片前压缩图片

上传前把图片大小进行一个压缩在进行上传。

文章目录

前言

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

一、插件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

},

}

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。