h5 压缩图片上传
拍照后拿到的是一个file对象， 由于一些手机的相机像素高 拍出的照片比较大需要压缩。 思路就是通过 将file对象 通过canvas 压缩 得到新的一个file 上传
<inputref="camera"class="cameraInput"type="file"name="file"accept="image/*"capture="camera"@change="uploadImg"/>
压缩方法
/*** 压缩图片* @param {file} 输入图片* @returns {Promise} resolved promise 返回压缩后的新图片*/
const compressImage = (file: any,maxWidth: number,maxHeight: number,quality: number,callback: any
) => {// 创建FileReader读取图片const reader = new FileReader()reader.readAsDataURL(file)reader.onload = (event) => {const img = new Image()img.src = event.target.result // FileReader读取的结果img.onload = () => {// 创建一个Canvas对象，并绘制压缩后的图片const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')let width = img.widthlet height = img.height// 按比例调整尺寸if (width > maxWidth) {height *= maxWidth / widthwidth = maxWidth}if (height > maxHeight) {width *= maxHeight / heightheight = maxHeight}canvas.width = widthcanvas.height = heightctx.drawImage(img, 0, 0, width, height)// 将Canvas转换回DataURLconst dataUrl = canvas.toDataURL('image/jpeg', quality)// 将DataURL转换成Blob对象fetch(dataUrl).then((res) => res.blob()).then((blob) => callback(blob)) // 调用回调函数，返回压缩后的Blob对象}}
}
使用
uploadFileAjax 是一个上传文件的方法 自己写就可以了
/*** @description: 上传文件* @return {*}*/const uploadImg = (e: any) => {// 这里可以做一些限制 比如 文件大小 文件类型等// ----------const oldFile = e.target.files[0]let file: any = ''//判断图片大小不超过1024k 压缩下图片const mb = oldFile.size / 1024 / 1024if (mb > 1) {// 压缩compressImage(oldFile, 800, 600, 0.7, (compressedBlob: any) => {// 使用compressedBlob，例如创建一个新的File对象file = new File([compressedBlob], oldFile.name, {type: oldFile.type,lastModified: Date.now()})// 处理compressedFile，例如上传uploadFileAjax(file)})} else {uploadFileAjax(oldFile)}
}