wordpress内容模型,进一步优化营商环境,怎样运营网站,自己电脑可以做网站服务器效果
上传一张图片#xff0c;看看文件的大小。我们会发现小了很多 思路
图片太大也是因为宽高太大#xff0c;进行宽高的缩放就可以了 实现过程
const onUpload async ({ file }) {console.log(file);if (file.size / 1024 / 1024 100) {message.error(大小不…效果
上传一张图片看看文件的大小。我们会发现小了很多 思路
图片太大也是因为宽高太大进行宽高的缩放就可以了 实现过程
const onUpload async ({ file }) {console.log(file);if (file.size / 1024 / 1024 100) {message.error(大小不能超过 100MB);return false;}// 创建一个 Image 对象const img new Image();img.src URL.createObjectURL(file);// 等待图片加载完成await new Promise((resolve, reject) {img.onload resolve;img.onerror reject;});// 创建一个 Canvas 对象const canvas document.createElement(canvas);const ctx canvas.getContext(2d);var aspectRatio img.width / img.height;var newWidth 750; // 新的宽度为 750var newHeight newWidth / aspectRatio; // 根据宽高比计算新的高度canvas.width newWidth;canvas.height newHeight;// 在 Canvas 上绘制压缩后的图片ctx.drawImage(img, 0, 0, newWidth, newHeight);// 将 Canvas 中的图片转为 Blob 对象压缩后的图片canvas.toBlob((blob) {console.log(blob, 111);uploadFile(blob).then((res) {fileList.value.push({name: res.name,url: res.url});fileList.value fileList.value.filter((item) {if (item.status ! uploading) {return item;}});message.success(上传成功);}).catch((e) {message.error(e.message);});},file.type,0.7); // 压缩质量0.7 表示压缩率为 70%};
