解决Vue中拍照上传图片旋转问题：compressorjs压缩与修复

"使用compressorjs解决Vue项目中 vant-ui 图片上传时可能出现的90度旋转问题，并实现图片压缩功能。" 在前端开发中，尤其是涉及到用户通过手机拍照上传图片时，有时会遇到图片方向异常的问题，即图片在设备上显示正常，但上传后会被旋转90度。这种问题通常是由于相机元数据（Exif信息）中的方向指示导致的。为了解决这个问题，可以借助compressorjs这个JavaScript库，它提供了图片压缩和旋转的功能。 compressorjs是一款轻量级的图片处理工具，可以在浏览器环境中运行。你可以通过npm安装它： ```bash npm install compressorjs ``` 使用compressorjs时，你可以创建一个新的Compressor实例并传入图片文件和配置选项，如压缩质量。以下是一个基本的使用示例： ```javascript import Compressor from 'compressorjs'; const file = // 图片文件 new Compressor(file, { quality: 0.6, // 压缩质量，值越小质量越低 success(result) { // 压缩成功后的回调，result是处理后的文件 console.log('压缩成功:', result); }, error(err) { // 压缩失败后的回调 console.error('图片压缩失败:', err); }, }); ``` 在Vue项目中，如果你使用了vant-ui的`<van-uploader>`组件，你可以在`after-read`事件中调用compressorjs来处理图片。例如： ```html <van-uploader v-model="fileList" multiple :after-read="afterCard" /> ``` 然后在Vue组件中定义`afterCard`方法： ```javascript import ImageCompressor from '@/utils/ImageCompressor'; // 引入ImageCompressor.js async afterCard(file) { const files = file.file; let newFile = await ImageCompressor(files, 'file', 0.6); // 图片压缩 const formData = new FormData(); formData.append('file', newFile); // uploadImg 是你的上传图片的接口函数 await uploadImg(formData).then(res => { if (res.code === 200) { this.centerInfo.iconUrl = res.data; // 其他逻辑... } }); } ``` `ImageCompressor.js`是一个封装好的工具函数，它接收图片文件、返回类型（如blob或file）和压缩质量作为参数，返回一个Promise对象，便于异步处理： ```javascript import Compressor from 'compressorjs'; export default function ImageCompressor(file, backType = 'blob', quality = 0.6) { return new Promise((resolve, reject) => { new Compressor(file, { quality, success(result) { if (!backType || backType === 'blob') { resolve(result); } else if (backType === 'file') { resolve(file); } else { resolve(file); } }, error(err) { console.log('图片压缩失败'); reject(err); }, }); }); } ``` 通过以上步骤，你可以在Vue项目中使用compressorjs处理图片，不仅解决了照片上传时可能出现的旋转问题，还能对图片进行压缩，减少上传的数据量，提高用户体验。记得在实际应用中，根据具体需求调整compressorjs的配置，比如压缩质量、尺寸限制等。