Element-UI上传时修改上传图片的宽高
// 上传前 beforeUpload(file) { // 创建一个Image对象 const image = new Image(); // 设置图片的src为选中文件的对象url image.src = URL.createObjectURL(file); return new Promise((resolve, reject) => { image.onload = () => { // 设置想要的图片宽度和高度 const width = 100; const height = 200; // 创建一个Canvas对象 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置Canvas的宽高 canvas.width = width; canvas.height = height; // 绘制图片 ctx.drawImage(image, 0, 0, width, height); // 将Canvas转换为blob数据 canvas.toBlob(blob => { if (blob) { // 使用新的blob对象替换原有的文件对象 file = new File([blob], file.name, { type: 'image/png', }); // 继续上传流程 resolve(file); } else { reject(new Error('Canvas conversion error')); } }, 'image/png'); }; image.onerror = reject; }); },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)