1.vant的uploader组件上传文件前会触发before-read方法
<van-uploader :name="v.stuffCode" v-model="v.filePath" :before-read="beforeRead(v)" :after-read="afterRead(v,item,index)" :before-delete="del(v)" />
2.拿到文件流,进行文件流→base64转换
beforeRead(v){
return async (file)=>{
console.log(file)
let imgFile = await this.blobToBase64(file)
console.log(imgFile, '压缩后的图片文件获取')
return imgFile
}
},
async blobToBase64 (blob) {
console.log(blob.name)
const self = await this // 绑定this
const reader = await new FileReader() // 实例化一个reader文件
await reader.readAsDataURL(blob) // 添加二进制文件
return new Promise(function (resolve, reject) {
reader.onload = async function (event) {
const base64 = await event.target.result // 获取到它的base64文件
const scale = 0.99 // 设置缩放比例 (0-1)
let file = await self.compressImg(base64, scale,blob.name)
resolve(file)
}
})
},
3.拿到base64,进行canvas绘制画布、然后在进一步转成base64、atob解码,最后通过
file生成新的文件流
async compressImg (base64, scale,name) {
console.log(`执行缩放程序,scale=${scale}`)
// 处理缩放,转换格式
// 用canvas来压缩
const img = new Image()
img.src = base64
return new Promise(function (resolve, reject) {
img.onload = async function () {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.setAttribute('width', this.width)
canvas.setAttribute('height', this.height)
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 转成base64 文件
base64 = canvas.toDataURL('image/jpeg', 0.5)
const arr = base64.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bytes = atob(arr[1])
const bytesLength = bytes.length
const u8arr = new Uint8Array(bytesLength)
for (let i = 0; i < bytes.length; i++) {
u8arr[i] = bytes.charCodeAt(i)
}
const file = await new File([u8arr], name, { type: mime })
resolve(file)
}
})
},