Upload プラグインでファイルをアップロードする

巨大なファイルや複数のファイルを効率的にアップロードするための tauri-plugin-upload プラグインの使用方法です。JavaScript の fetch や FormData でもアップロードは可能ですが、このプラグインを使うと Rust 側で処理が行われるため、パフォーマンスや進捗管理の面で有利な場合があります。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
    "permissions": [
        ...,
        "upload:default"
    ]
}

1. セットアップ

npm run tauri add upload

src-tauri/src/lib.rs:

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_upload::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

3. ファイルアップロードの実装

フロントエンドからアップローダーを実行します。

import { upload } from '@tauri-apps/plugin-upload';

try {
  await upload(
    'https://example.com/upload', // アップロード先 URL
    'path/to/file.png',           // ファイルパス（絶対パス）
    // オプション（進捗コールバック、ヘッダーなど）
    ({ progress, total }) => console.log(`Progress: ${progress} / ${total}`),
    new Map([
      ['Authorization', 'Bearer token123'],
      ['Content-Type', 'multipart/form-data']
    ])
  );
  console.log('Upload success');
} catch (error) {
  console.error('Upload failed', error);
}

注意点

• ファイルパスは絶対パスである必要があります。tauri-plugin-dialog で取得したパスなどをそのまま渡せます。
• Content-Type はデフォルトで multipart/form-data として扱われることが多いですが、サーバー側の仕様に合わせてヘッダーを調整してください。
• デフォルトの HTTP メソッドは POST です。PUT や PATCH を使用したい場合は、第5引数に HttpMethod Enum を指定します。

import { upload, HttpMethod } from '@tauri-apps/plugin-upload';
await upload(..., ..., ..., ..., HttpMethod.Put);