// canvas生成的格式为base64,需要进行转化, base64->file const dataURLtoFile = (dataurl,fileName)=> { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], fileName, {type:mime}) } // canvas生成的格式为base64,需要进行转化, base64->blob const dataURLtoBlob = (dataurl)=> { const arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
/**
* @压缩公共方法
* @params file
* @return 压缩后的文件,支持两种,file和 blob
*/
const compressImg = (file,fileName)=> { return new Promise(resolve => { const reader = new FileReader(); // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend (en-US) 事件, // 同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。 reader.readAsDataURL(file); reader.onload = () => { const img = new Image(); img.src = reader.result; img.onload = () => { // 图片的宽高 const w = img.width; const h = img.height; const canvas = document.createElement("canvas"); // canvas对图片进行裁剪,这里设置为图片的原始尺寸 canvas.width = w; canvas.height = h; const ctx = canvas.getContext("2d"); // canvas中,png转jpg会变黑底,所以先给canvas铺一张白底 ctx.fillStyle = "#fff"; // fillRect()方法绘制一个填充了内容的矩形,这个矩形的开始点(左上点)在 // (x, y) ,它的宽度和高度分别由width 和 height 确定,填充样式由当前的fillStyle 决定。 ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制图像 ctx.drawImage(img, 0, 0, w, h); // canvas转图片达到图片压缩效果 // 返回一个包含图片展示的 data URI base64 在指定图片格式为 image/jpeg 或 image/webp的情况下, // 可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。 const dataUrl = canvas.toDataURL("image/jpeg", 0.8); // base64格式文件转成Blob文件格式 let blobFile = dataURLtoBlob(dataUrl); console.log("压缩后的图片:Blob文件----------"); console.log(blobFile); // base64格式文件转成file文件格式 // let fileName = this.sourceFile.name resolve(dataURLtoFile(dataUrl,fileName)); console.log("压缩后的图片:file文件----------"); }; }; }) }
const uploadAction= async (option)=>{ const file = await compressImg(option.file,option.file.name) let formData = new FormData() formData.append('file',file) baseService.post('上传路径',formData).then(res=>{ if (res.code !== 0) { return ElMessage.error(res.msg); } emit("update:modelValue", res.data.src); ElMessage.success({ message: "上传成功" }); }).catch(()=>{ ElMessage.error({ message: "上传失败" }); }) }