vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

如下所示： 这个需求针对用户上传手机拍摄照片等不便修改图片大小的情况，我们允许上传10M以内的图片由前端对图片进行压缩再传给后台存储，结合elementUI的el-upload组件实现图片上传功能（简单来说就是用户是老大） 1、提取出压缩方法，放在公共方法.js文件里 /** 图片压缩，默认同比例压缩 * @param {Object} fileObj * 图片对象 * 回调函数有一个参数，base64的字符串数据 */ export function compress(fileObj, callback) { try { const image = new Image() 在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的前端压缩功能。此功能对于处理用户上传的大尺寸图片，尤其是来自手机拍摄的照片，非常有用，它允许我们在上传前将图片压缩到合适的大小，避免了对服务器造成不必要的负担。 1. **图片压缩原理与实现** 图片压缩通常涉及到调整图片的宽度和高度，以及控制图片的质量。在提供的代码中，`compress`函数承担了这个任务。通过`new Image()`创建一个Image对象，设置其`src`为待压缩图片的URL。然后，当图片加载完成后，通过`onload`事件，获取图片的原始宽高（`w`和`h`）。为了保持图片的比例，计算出缩放比例（`scale`），并根据此比例确定压缩后的宽高。接着，创建一个`canvas`元素，设置其宽高属性，并使用`drawImage`方法将原图绘制到canvas上。通过调整`canvas`的`toDataURL`方法的第二个参数（图片质量`quality`），生成压缩后的base64编码，再将其转换为Blob对象返回。 2. **Element UI的`el-upload`组件** `el-upload`是Element UI库中用于文件上传的组件，它可以方便地实现文件上传、预览、限制文件类型等功能。在示例中，`<el-upload>`组件被配置为仅允许上传一张图片，禁用自动上传，不显示文件列表，并在文件改变时调用`handlePictureCardPreview`方法。`before-upload`属性定义了一个函数`beforeupload`，该函数可以用来进一步处理文件，例如在此处进行图片压缩。 3. **文件上传流程** - 用户选择文件后，`el-upload`会触发`on-change`事件，调用`handlePictureCardPreview`方法。 - 在`handlePictureCardPreview`中，我们可以调用`compress`函数来压缩图片，传入文件对象和一个回调函数。 - `compress`函数执行完毕后，会将压缩后的Blob对象通过回调传递回`handlePictureCardPreview`。 - 我们需要更新表单中的图片字段，通常是使用`this.$refs.uploadElement.file = compressedFile`，将压缩后的文件替换原来的文件，然后触发上传。 4. **注意事项** - 图片质量（`quality`）的取值范围是0到1之间，值越小，压缩程度越高，但图片质量也越低。在代码中，它默认为0.7，用户可以通过参数自定义。 - 为了避免浏览器兼容性问题，确保使用`URL.createObjectURL`来创建可读取的图片URL。 - 使用`convertBase64UrlToBlob`函数将base64编码转换回Blob对象，以便于上传。 5. **优化与扩展** - 可以添加进度条显示图片压缩的进度，提高用户体验。 - 对于大量图片上传，可以考虑使用Promise.all处理并发压缩，提高性能。 - 如果需要支持多种图片格式，可能需要在压缩前检查图片格式，并在必要时进行转换。 结合Vue.js和Element UI的`el-upload`组件，我们可以通过自定义的压缩函数实现在前端对用户上传的图片进行压缩，从而优化上传效率和减轻服务器的压力。这一功能对于现代Web应用来说是非常实用的，尤其在处理大量图片上传的场景下。