原文件:https://github.com/fengyuanchen/compressorjs
安装
npm install compressorjs
使用
import { compressImage } from '@/utils/CompressImageUtiles'
...
// 单张上传
file.status = 'uploading'
file.message = '上传中...'
// 压缩图片
compressImage(file.file).then(result => {
console.log('压缩后的结果', result) // result即为压缩后的结果
console.log('压缩前大小', file.file.size)
console.log('压缩后大小', result.size)
if (result.size > file.file.size) {
// 压缩后比原来更大,则将原图上传
//调接口上传图片到服务器
this._uploadFile(file.file, cueIndex, file.file.name)
} else {
// 压缩后比原来小,上传压缩后的
//调接口上传图片到服务器
this._uploadFile(result, cueIndex, file.file.name)
}
})
...
// 上传图片
_uploadFile(file,filename) {
const formData = new FormData()
formData.append('file', file)
axios
.post(`${baseFileUrl}/uavDelivery/file/uploadFile`, formData, {
headers: {
Authorization: storage.get(ACCESS_TOKEN)
}
}) // 填写url地址
.then(res => {
// 上传成功
})
.catch(err => {
console.log(err)
// 上传失败
} else {
this.$toast('最多上传九张照片!')
}
}
压缩图片js
CompressImageUtiles.js
/**
*/
// 将base64转换为blob
import Compressor from 'compressorjs'
export function compressImage(file) {
if (!file) {
return
}
return new Promise((resolve, reject) => {
new Compressor(file, {
quality: 0.6,
maxWidth: 1000,
maxHeight: 1000,
success(result) {
resolve(result)
},
error(err) {
console.log(err.message)
reject(err.message)
}
})
})
}