简介：本文深入探讨uni-app中uni.chooseImage API的完整使用流程，涵盖相机调用、相册选择及图片转base64编码的详细步骤，适合开发者快速掌握图片处理核心技能。

一、uni.chooseImage API核心功能解析

uni.chooseImage是uni-app框架提供的跨平台图片选择API，支持同时调用设备相机拍照和从相册选择图片。其核心参数包括：

count：最大选择数量（默认9，iOS单次最多9张）
sourceType：图片来源（’album’相册/‘camera’相机/[‘album’,’camera’]两者）
sizeType：返回图片尺寸（’original’原图/‘compressed’压缩图）
success：成功回调函数
fail：失败回调函数
complete：完成回调函数

该API的跨平台特性尤为突出，在微信小程序、H5、App等多端表现一致。根据uni-app官方文档，其实现原理基于各平台原生能力封装，iOS通过UIImagePickerController实现，Android通过Intent调用系统相机/相册，H5端则依赖input[type=file]元素。

二、完整实现流程与代码示例

1. 基础调用实现

uni.chooseImage({
  count: 1,
  sourceType: ['album', 'camera'],
  sizeType: ['compressed'],
  success: (res) => {
    const tempFilePaths = res.tempFilePaths;
    console.log('图片临时路径:', tempFilePaths[0]);
    // 此处可添加base64转换逻辑
  },
  fail: (err) => {
    console.error('选择图片失败:', err);
  }
});

2. 图片转base64编码实现

在uni-app中，需通过uni.getFileSystemManager()获取文件管理器，再使用readFile方法读取文件内容：

function imageToBase64(filePath) {
  return new Promise((resolve, reject) => {
    // #ifdef APP-PLUS
    const fs = uni.getFileSystemManager();
    fs.readFile({
      filePath: filePath,
      encoding: 'base64',
      success: (res) => {
        const base64Data = 'data:image/jpeg;base64,' + res.data;
        resolve(base64Data);
      },
      fail: (err) => {
        reject(err);
      }
    });
    // #endif
    // H5端特殊处理
    // #ifdef H5
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const base64 = canvas.toDataURL('image/jpeg');
      resolve(base64);
    };
    img.src = filePath;
    // #endif
  });
}

3. 完整业务逻辑示例

export default {
  methods: {
    async selectAndConvertImage() {
      try {
        const res = await uni.chooseImage({
          count: 1,
          sourceType: ['album', 'camera'],
          sizeType: ['compressed']
        });
        const tempPath = res.tempFilePaths[0];
        const base64Str = await imageToBase64(tempPath);
        this.handleBase64Image(base64Str);
      } catch (error) {
        uni.showToast({
          title: '处理失败',
          icon: 'none'
        });
        console.error('完整流程错误:', error);
      }
    },
    handleBase64Image(base64) {
      // 实际应用场景处理
      console.log('Base64编码:', base64.substring(0, 50) + '...');
      // 可上传至服务器或直接显示
    }
  }
}

三、跨平台兼容性处理要点

1. 平台差异处理

微信小程序：需在app.json中配置"requiredPrivateInfos": ["chooseImage"]
App端：Android 10+需处理存储权限，iOS需配置NSPhotoLibraryUsageDescription
H5端：需处理跨域问题，建议配置服务器CORS

2. 性能优化建议

压缩策略：优先使用sizeType: ['compressed']减少数据量
内存管理：大图处理时建议分块读取
错误处理：增加网络状态检测和重试机制

3. 安全注意事项

临时文件清理：使用后及时删除临时路径

// #ifdef APP-PLUS
const fs = uni.getFileSystemManager();
fs.unlink({
filePath: tempPath,
success: () => console.log('临时文件已删除')
});
// #endif

Base64传输：超过2MB建议分片传输
权限控制：动态申请相机/相册权限

四、典型应用场景与最佳实践

1. 用户头像上传

async uploadAvatar() {
  const [res] = await uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    sizeType: ['compressed']
  });
  const base64 = await this.imageToBase64(res.tempFilePaths[0]);
  const uploadRes = await uni.uploadFile({
    url: 'https://example.com/upload',
    filePath: res.tempFilePaths[0],
    name: 'avatar',
    formData: {
      'base64': base64.split(',')[1] // 去除data前缀
    }
  });
  // 处理上传结果...
}

2. 证件识别预处理

调用相机时建议添加引导框

uni.chooseImage({
sourceType: ['camera'],
// 自定义相机参数（部分平台支持）
// #ifdef APP-PLUS
extension: {
 guide: true, // 显示引导线
 ratio: [3, 4] // 指定宽高比
}
// #endif
});

转换base64后进行边缘检测预处理

3. 性能监控指标

选择耗时：建议<500ms
转换耗时：压缩图<1s
内存占用：单张处理<100MB

五、常见问题解决方案

1. 微信小程序选择失败

现象：chooseImage:fail permission denied

解决方案：在app.json中添加配置

{
"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于定位"
  },
  "scope.writePhotosAlbum": {
    "desc": "需要保存图片到相册"
  }
}
}

2. Android 10存储权限

// native.js调用示例
if (plus.os.name === 'Android') {
  const main = plus.android.runtimeMainActivity();
  if (plus.android.invoke(main, 'checkSelfPermission', 'android.permission.WRITE_EXTERNAL_STORAGE') 
      !== plus.android.PackageManager.PERMISSION_GRANTED) {
    plus.android.invoke(main, 'requestPermissions', 
      ['android.permission.WRITE_EXTERNAL_STORAGE'], 1001);
  }
}

3. H5端跨域问题

解决方案：

配置Nginx反向代理

location /upload {
proxy_pass http://backend-server;
add_header 'Access-Control-Allow-Origin' '*';
}

使用uni.request的header配置

uni.request({
url: 'https://example.com/api',
header: {
 'Content-Type': 'application/x-www-form-urlencoded'
}
});

六、进阶优化技巧

1. 图片质量动态调整

function getOptimizedSize(width) {
  const screenWidth = uni.getSystemInfoSync().windowWidth;
  return width > screenWidth * 2 ? screenWidth * 2 : width;
}

2. 多图并行处理

async function processMultipleImages(paths) {
  const promises = paths.map(path => imageToBase64(path));
  return await Promise.all(promises);
}

3. 内存泄漏预防

使用WeakRef处理大图引用
及时释放Canvas上下文
避免在循环中创建新Image对象

通过系统掌握uni.chooseImage API的使用方法，开发者可以高效实现图片选择、处理和传输的全流程功能。实际开发中需结合具体业务场景，在性能、用户体验和兼容性之间取得平衡。建议建立完整的错误处理机制，并通过真机测试验证各平台表现。

uni-app中uni.chooseImage调用相机相册并转base64全攻略