vue实现压缩图片预览并上传功能（promise封装）

在现代Web开发中，前端开发人员经常需要处理图片上传、预览以及压缩的功能。本文主要介绍了使用Vue框架实现图片上传和预览，并在上传前对图片进行压缩的技术实现方法。以下是详细介绍： 1. HTML模板部分 我们来看看使用Vue实现图片上传和预览功能的HTML模板代码。这段代码使用了`<input>`元素来触发文件选择，并通过`@change`事件绑定了一个名为`imageHandle`的方法来处理图片选择事件。图片展示部分通过`<img>`元素来实现，`ref`属性用于后续在JavaScript代码中对DOM元素进行引用。 ```html <template> <div class="image-box"> <input type="file" accept="image/*" @change="imageHandle"> <img ref="upImg"/> </div> </template> ``` 2. JavaScript逻辑部分 在JavaScript逻辑中，我们监听了`input`元素的`change`事件来获取用户上传的图片文件。这里使用了`FileReader` API将文件读取为Base64格式的数据，然后使用`Image`对象加载这些数据，并通过`canvas` API将图片绘制出来以进行压缩处理。 为了保证压缩的图片仍然能够被用户预览，我们进行了以下步骤： - 首先检查上传的文件大小是否超过了指定的限制（100KB），如果小于等于限制，则直接在`<img>`标签中展示图片。 - 如果文件大小超过限制，则使用`canvas`的`toDataURL`方法进行压缩处理。 - 压缩后的图片会再次检查是否符合上传限制，如果符合则准备上传，不符合则提示用户。 具体的代码逻辑如下： ```javascript methods: { // 监听input file的change事件 imageHandle(e){ let that = this; let maxSize = 100 * 1024; let files = e.srcElement.files; if (!files.length) return; // 检查是否选择了文件 let file = files[0]; if (!/^image\//.test(file.type)) return; // 检查是否为图片文件 let reader = new FileReader(); reader.readAsDataURL(file); // 将图片转成base64格式 reader.onload = function() { let result = this.result; let img = new Image(); img.src = result; img.onload = function() { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); let width = img.width; let height = img.height; // 压缩图片到指定大小 if (width * height > 2000000) { // IOS上的限制：图片像素总数不能超过200万 canvas.width = Math.sqrt(2000000 / (width / height)); canvas.height = Math.sqrt(2000000 / (width / height)); } else { canvas.width = width; canvas.height = height; } // 绘制压缩后的图片到canvas context.drawImage(img, 0, 0, canvas.width, canvas.height); let compressedDataUrl = canvas.toDataURL('image/jpeg', 0.5); // 以JPEG格式保存压缩后的图片，压缩质量为0.5 if (compressedDataUrl.length <= maxSize) { // 如果压缩后的图片大小小于100KB，则直接上传 that.$refs.upImg.src = compressedDataUrl; // 上传图片逻辑... } else { // 如果压缩后的图片仍然太大，则提示用户 alert("图片压缩后仍然过大，无法上传。"); } }; }; } } ``` 3. 上传压缩后的图片 在图片预览并压缩后，我们将Base64格式的图片数据转换为二进制数据，并将其添加到`FormData`对象中。随后，使用`XMLHttpRequest`将`FormData`对象上传到服务器。 4. 浏览器兼容性处理 在上述代码中，还考虑了浏览器的兼容性问题。例如，使用`FileReader`和`FormData`时，会检查它们是否被浏览器支持。如果不支持，那么整个上传逻辑将不会执行。 5. 注意事项 在使用canvas对图片进行压缩时，要注意不同设备的浏览器可能有不同的限制。例如，iOS设备上的canvas绘制图片时，图片的像素总数不能超过200万像素，而canvas的宽度和高度乘积不能超过大约五百万像素。如果超出这个范围，通过`toDataURL`方法获取的数据将是空的。 通过上述代码和逻辑，我们能够实现一个在用户上传图片时，自动压缩图片并进行预览的功能。该功能不仅提高了用户体验，还能有效地减少服务器的存储压力。