Vue实现图片压缩预览与上传

"这篇文章主要介绍如何在Vue.js项目中实现图片的压缩预览与上传功能，利用HTML5的FileReader、Canvas和FormData API来完成这一流程。" 在Vue.js应用程序中，实现图片压缩预览并上传功能是一个常见的需求，尤其在用户需要上传个人头像或者产品图片时。以下是一个详细的步骤解析： 首先，我们需要在模板中设置一个`<input type="file">`元素，让用户选择要上传的图片，并添加一个`@change`事件监听器，以便在用户选择图片后触发处理函数。同时，为了预览图片，我们还需要一个`<img>`元素。模板代码如下： ```html <template> <div class="image-box"> <input type="file" accept="image/*" @change="imageHandle"> <img ref="upImg"/> </div> </template> ``` 接下来，我们需要在`methods`中定义`imageHandle`方法，用于处理图片上传： ```javascript methods: { imageHandle(e) { let that = this; // 保存当前上下文，防止在异步回调中丢失 let maxSize = 100 * 1024; // 图片最大大小，例如100KB let files = e.srcElement.files; if (!files.length) return; // 没有选择图片则不处理 if (!/^image\/\//.test(files[0].type)) return; // 必须是图片类型 if (!window.FileReader) return; // 浏览器不支持FileReader // 创建FileReader对象 let reader = new FileReader(); reader.readAsDataURL(files[0]); // 读取图片为base64格式 reader.onload = function() { let result = this.result; let img = new Image(); img.src = result; let formData = new FormData(); // 图片加载完成后进行压缩 img.onload = function() { let canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); // 压缩图片，这里可以根据需求调整压缩比例 let compressRatio = 0.8; while (canvas.toDataURL('image/jpeg', compressRatio).length > maxSize) { compressRatio -= 0.1; } canvas.toDataURL('image/jpeg', compressRatio); // 获取压缩后的base64数据 formData.append('image', canvas.toDataURL('image/jpeg', compressRatio), 'image.jpg'); // 添加到formData // 使用axios或fetch等库发送请求 axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { console.log('图片上传成功:', response); }) .catch(error => { console.error('图片上传失败:', error); }); }; }; } } ``` 在这个方法中，我们首先读取用户选择的图片为base64格式，然后创建一个新的`Image`对象，将base64数据赋值给它的`src`属性。当图片加载完成后，我们将其绘制到`canvas`上，并利用`canvas.toDataURL`方法进行压缩。压缩过程是循环进行的，直到图片的base64数据长度小于指定的最大值。最后，我们将压缩后的图片数据添加到`FormData`对象中，并通过`axios`或`fetch`等库发送HTTP请求到服务器进行图片上传。 需要注意的是，这只是一个基础示例，实际应用中可能需要处理更多边缘情况，比如错误处理、多张图片上传、图片格式检查等。此外，图片压缩的比例可能需要根据具体需求进行调整，以达到最佳的上传效果和用户体验。