使用Ionic Capacitor多选图库图片转Blob并上传服务器的问题求助

我正在用Ionic Angular开发移动端应用，通过Capacitor的Camera.pickImages方法从图库选择多张图片，打算转成Blob后上传到AWS Storage（后端用Laravel处理），但卡在图片转Blob的步骤，求转Blob的方法或更优实现方案。

相关前端代码 #

const images = async pickItemImages (){
const images =  await Camera.pickImages({
  quality: 100,
  presentationStyle: 'fullscreen',
  limit: 5,
});
images = images.photos;


for(let i = 0; i<images.length; i++){
   const blobData = //convert to blob
   //upload to server
}

相关Laravel后端代码 #

$file = $request->file('file');

$extension = $file->getClientOriginalExtension();
$filename = md5(mt_rand() . time()) . '.' . $extension;

$filePath = 'uploads';
$storagePath = Storage::disk('items')->putFileAs($filePath, $file, $filename ,'public');
$path = Storage::disk('items')->url($storagePath);

一、图片转Blob的直接实现方法 #

Capacitor返回的Photo对象中，webPath字段兼容Web端的base64 URL和移动端的本地文件路径，用fetch API即可直接转换为Blob：

修改后的前端代码：

async pickItemImages() {
  const result = await Camera.pickImages({
    quality: 100,
    presentationStyle: 'fullscreen',
    limit: 5,
  });
  const images = result.photos;

  for (let i = 0; i < images.length; i++) {
    const photo = images[i];
    // 通过webPath获取Blob
    const response = await fetch(photo.webPath!);
    const blobData = await response.blob();
    
    // 包装成FormData用于上传
    const formData = new FormData();
    // 指定文件名和格式，确保后端能正确识别文件类型
    formData.append('file', blobData, `upload_img_${i}.${photo.format}`);
    
    // 发送请求到Laravel后端
    await fetch('/api/image-upload', {
      method: 'POST',
      body: formData,
      headers: {
        // 带上Laravel的CSRF令牌
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
      }
    });
  }
}

二、更优上传方案（移动端专用） #

如果是纯移动端场景，推荐用Capacitor的Filesystem插件读取原始文件，或直接用Http插件上传，避免不必要的Blob转换：

方案1：用Filesystem读取文件转Blob #

1. 安装插件

npm install @capacitor/filesystem
npx cap sync

2. 实现代码

import { Filesystem } from '@capacitor/filesystem';

async pickItemImages() {
  const result = await Camera.pickImages({
    quality: 100,
    presentationStyle: 'fullscreen',
    limit: 5,
  });
  const images = result.photos;

  for (let i = 0; i < images.length; i++) {
    const photo = images[i];
    // 读取本地文件为base64
    const fileRes = await Filesystem.readFile({
      path: photo.path!
    });
    // 转成Blob
    const blobData = await fetch(`data:image/${photo.format};base64,${fileRes.data}`).then(res => res.blob());
    
    // 后续上传逻辑同前
  }
}

方案2：用Capacitor Http直接上传文件 #

import { Http } from '@capacitor/http';

async pickItemImages() {
  const result = await Camera.pickImages({
    quality: 100,
    presentationStyle: 'fullscreen',
    limit: 5,
  });
  const images = result.photos;

  for (let i = 0; i < images.length; i++) {
    const photo = images[i];
    await Http.post({
      url: '/api/image-upload',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
      },
      formData: {
        file: {
          uri: photo.path!,
          name: `upload_img_${i}.${photo.format}`,
          type: `image/${photo.format}`
        }
      }
    });
  }
}

三、后端配置注意事项 #

确保config/filesystems.php中已正确配置AWS S3的items磁盘：

'disks' => [
    // ...
    'items' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
        'public' => true,
    ],
],

内容的提问来源于stack exchange，提问作者Eliasu