ファイルのアップロード
uploadData
uploadDataメソッドはファイルをAmazon S3にアップロードします。
import { uploadData } from 'aws-amplify/storage';
try { const result = await uploadData({ path: 'public/album/2024/1.jpg', // また別の方法として: path: ({identityId}) => `protected/${identityId}/album/2024/1.jpg` data: file, options: { onProgress // オプション：進捗コールバック。 } }).result; console.log('成功しました: ', result);} catch (error) { console.log('エラー: ', error);}import { uploadData } from 'aws-amplify/storage';
try { const result = await uploadData({ key: 'album/2024/1.jpg', data: file, options: { accessLevel: 'guest', // デフォルトは`guest`ですが、'private' | 'protected' | 'guest'に設定できます onProgress // オプション：進捗コールバック。 } }).result; console.log('成功しました: ', result);} catch (error) { console.log('エラー: ', error);}アップロードの進捗を監視する
アップロードの進捗を追跡するには、onProgressオプションを使用できます：
import { uploadData } from 'aws-amplify/storage';
try { const result = uploadData({ path: 'public/album/2024/1.jpg', // また別の方法として: path: ({identityId}) => `protected/${identityId}/album/2024/1.jpg` data: file, options: { onProgress: ({ transferredBytes, totalBytes }) => { if (totalBytes) { console.log( `アップロード進捗 ${ Math.round((transferredBytes / totalBytes) * 100) } %` ); } } } }).result; console.log('レスポンスからのパス: ', result.path);} catch (error) { console.log('エラー: ', error);}import { uploadData } from 'aws-amplify/storage';
try { const result = uploadData({ key: 'album/2024/1.jpg', data: file, options: { onProgress: ({ transferredBytes, totalBytes }) => { if (totalBytes) { console.log( `アップロード進捗 ${ Math.round((transferredBytes / totalBytes) * 100) } %` ); } } } }).result; console.log('レスポンスからのキー: ', result.key);} catch (error) { console.log('エラー: ', error);}アップロードの一時停止と再開
uploadDataリクエストの再開、一時停止、キャンセルをサポートするコールバック関数があります。
import { uploadData } from 'aws-amplify/storage';
// タスクの一時停止と再開const uploadTask = uploadData({ path, data: file });//...uploadTask.pause();//...uploadTask.resume();//...await uploadTask.result;import { uploadData } from 'aws-amplify/storage';
// タスクの一時停止と再開const uploadTask = uploadData({ key, data: file });//...uploadTask.pause();//...uploadTask.resume();//...await uploadTask.result;アップロードをキャンセルする
import { uploadData, isCancelError } from 'aws-amplify/storage';
const uploadTask = uploadData({ path, data: file });//...uploadTask.cancel();try { await uploadTask.result;} catch (error) { if (isCancelError(error)) { // タスクキャンセルによって発生したエラーを処理する }}import { uploadData, isCancelError } from 'aws-amplify/storage';
const uploadTask = uploadData({ key, data: file });//...uploadTask.cancel();try { await uploadTask.result;} catch (error) { if (isCancelError(error)) { // タスクキャンセルによって発生したエラーを処理する }}その他の使用可能なオプションは次のとおりです：
import { uploadData } from 'aws-amplify/storage';
uploadData({ path: 'public/album/2024/1.jpg', // また別の方法として: path: ({identityId}) => `protected/${identityId}/album/2024/1.jpg` data: file, options: { contentType?: 'text/html', // (String) ファイルをダウンロードするときのデフォルトcontent-typeヘッダー値。 contentEncoding?: 'compress' // (String) ファイルをダウンロードするときのデフォルトcontent-encodingヘッダー値。 contentDisposition?: 'attachment', // (String) オブジェクトの表示情報を指定します metadata?: {key: 'value'}, // (map<String>) S3のオブジェクトとともに保存するメタデータのマップ。 useAccelerateEndpoint?: boolean; // アクセラレートエンドポイントを使用するかどうか。 }});ページリフレッシュがアップロード中に発生した場合、同じファイルでアップロードを再初期化すると、前の中断ポイントから続行されます。
ブラウザでのアップロード
ブラウザでファイルをアップロードします：
import { uploadData } from 'aws-amplify/storage';
const uploadDataInBrowser = async (event) => { if (event?.target?.files) { const file = event.target.files[0]; uploadData({ path: file.name, data: file }); }};import { uploadData } from 'aws-amplify/storage';
const uploadDataInBrowser = async (event) => { if (event?.target?.files) { const file = event.target.files[0]; uploadData({ key: file.name, data: file }); }};