Vue项目图片压缩
引用:import { compressImage } from './compress'...// 校验大小数量var file = document.querySelector('input').files[0]if(this.fileList.length >= 3){Message.success({ content: `最多可上传3张` })return}if(file.size
·
引用:
import { compressImage } from './compress'
...
// 校验大小数量
var file = document.querySelector('input').files[0]
if(this.fileList.length >= 3){
Message.success({ content: `最多可上传3张` })
return
}
if(file.size >= 1024 * 1024 * 2){
Message.success({ content: `照片大于2MB,请重新上传` })
return
}
// 压缩
/**
* @param { * } file input选择后返回的file对象
*/
compressImage(file).then((result) => {
// result.compressFile 压缩后新的file对象
var formData = new FormData()
formData.set('file', result.compressFile)
...将此formData传给后端
})
...
compress.js 图片压缩完整代码
/**
* @param { * } file input选择后返回的file对象
*/
export const compressImage = (file) => {
// 参数file,是通过input 选择本地文件获取的
return new Promise((resolve, reject) => {
const { type, name, size } = file
let img = new Image()
// 创建一个reader实例
let reader = new FileReader()
// 读取拿到的文件
reader.readAsDataURL(file)
reader.onload = (e) => {
// 文件加载成功后去转成Img对象,为了拿到图片的原始宽高
img.src = e.target.result
img.onload = () => {
// 创建画布canvas
let canvas = document.createElement('canvas')
let content = canvas.getContext('2d')
// 设置画布的宽高
canvas.width = img.width // 需要压缩到的图片宽度
canvas.height = img.width * (img.height / img.width)
// 将图片画在画布上
content.drawImage(img, 0, 0, canvas.width, canvas.height)
//画布转成blob格式的图片
canvas.toBlob((blob) => {
// blob 格式的图片 转成file对象,这里主要看接口支不支持blob格式的文件上传,如果支持就没有必要转
let file = new File([blob], name, { type: type, size: size })
resolve({ type: type, compressFile: file })
}, `image/${type.split('/')[1]}`, 0.6) // 0.7 是文件压缩程度
}
}
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)