使用了模块 image-conversion
https://github.com/WangYuLue/image-conversion
安装
npm i image-conversion --save
# or
yarn add image-conversion
设置el-upload监听钩子before-upload
<template>
<div class="">
<el-upload
class="upload-demo" :multiple="true" :action="uploadPath" :data="uploadData" accept="bmg,.png,.jpg,.jpeg" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="hanldeError" multiple
:limit="20">
<el-button size="small" type="primary">添加</el-button>
</el-upload>
</div>
</template>
处理方法：
beforeUpload (file) {
return this.$elUploadBeforeUpload(file);
},
在main.js中导入模块，并将处理函数挂载到Vue
// 注意 我使用的imageConversion版本为2.1.1，需要使用下面的形式导入
import * as imageConversion from 'image-conversion';
Vue.prototype.$elUploadBeforeUpload = function(file){
//图片大小超过4M,长度超过2000就压缩
return new Promise((resolve, reject) => {
let _URL = window.URL || window.webkitURL
let isLt2M = file.size / 1024 / 1024 > 0.5 // 判定图片大小是否小于0.5MB
// 这里需要计算出图片的长宽
let img = new Image()
img.onload = function () {
file.width = img.width // 获取到width放在了file属性上
file.height = img.height // 获取到height放在了file属性上
let valid = img.width > 1000 // 图片宽度大于2000
console.log('压缩前', file)
// 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
if (valid || isLt2M) {
// 大小在500k以下，宽度1000以下
imageConversion.compressAccurately(file, {
size: 500,
width: 1000 }).then(res => {
console.log('压缩后', res)
resolve(res)
})
} else {
resolve(file)
}
} // 需要把图片赋值
img.src = _URL.createObjectURL(file)
})
};
