在移动端Vue应用中，实现图片上传功能时，涉及到对H5图片处理、压缩和转换为Base64格式，并且特别针对iOS设备上的相机拍照时可能存在的旋转角度问题。以下步骤详细介绍了如何完成这一任务：
1. 引入`exif-js`库：首先，为了处理图片的Exif信息，包括旋转角度，我们需要引入这个JavaScript库，以便获取和纠正图片的正确方向。
```javascript
import EXIF from 'exif-js';
```
2. 文件上传处理函数：创建一个名为`dynamic_imgChange`的方法，当用户选择图片时调用。函数检查文件数量、大小和类型，确保符合要求：
- 检查文件长度限制：不超过9张图片。
- 检查文件大小：小于10MB。
- 检查文件扩展名：仅允许.jpg, .png, 或 .jpeg格式。
3. 使用FileReader读取图片并转换为Base64：当文件上传后，通过`FileReader`读取图片内容，并在`onload`事件中将图片转为Base64格式。
```javascript
reader.readAsDataURL(file);
reader.onload = function() {
let imgData = this.result; // 图片的Base64字符串
...
}
```
4. 处理图片旋转：利用`EXIF.getData`方法获取图片的Exif数据，特别是`Orientation`属性，判断是否需要旋转90度。如果是90度或其逆序，使用`canvas`来调整图片方向：
```javascript
let orient = EXIF.getTag(this, 'Orientation');
if (orient === 6) { // iOS相机拍照默认为横屏，所以可能出现90度旋转
img.onload = function() {
// 假设需要旋转90度，代码调整图像尺寸和方向
canvas.width = img.height;
canvas.height = img.width;
ctx.translate(canvas.width, 0);
ctx.rotate(Math.PI / 2);
ctx.drawImage(img, 0, 0);
// 继续处理Base64编码后的图片
};
}
```
5. 压缩图片：在`canvas`上绘制图片后，可以进一步使用Canvas API进行压缩，以适应阿里云的上传要求。这可能涉及调整图像质量或尺寸，具体方法取决于实际需求和阿里云的API文档。
6. 最后，上传Base64编码的图片到阿里云：处理完所有预处理步骤后，使用Base64字符串作为参数，上传到阿里云服务器。注意，具体的上传接口和参数设置需要根据阿里云官方文档来实现。
总结，这个过程包含了前端处理用户上传的图片，包括文件检查、Base64转换、图片旋转校正和可能的压缩，以适应特定的上传要求。在iOS设备上，由于相机拍摄图片可能会有旋转，开发者需要额外处理这部分逻辑。在整个流程中，关键点在于正确地读取、处理和转换图片数据，以确保最终上传成功。
我的内容管理
展开
