TUS JavaScriptクライアントの使用方法

2024-02-10 05:51 TUS JavaScript アップロード

以下に、TUS JavaScriptクライアントを使用する方法と、いくつかのコード例を示します。

  1. TUS JavaScriptクライアントのインストール: まず、TUS JavaScriptクライアントをインストールする必要があります。npmパッケージマネージャーを使用してインストールする場合は、以下のコマンドを実行します:

    npm install tus-js-client

  2. TUS JavaScriptクライアントの初期化: TUS JavaScriptクライアントを使用するには、まずクライアントを初期化する必要があります。以下は、初期化の例です:

    import tus from 'tus-js-client';
const upload = new tus.Upload(file, {
endpoint: 'https://example.com/files', // アップロード先のエンドポイントURL
retryDelays: [0, 1000, 3000, 5000], // リトライの遅延時間（ミリ秒）
metadata: {
filename: file.name,
filetype: file.type
},
onError: function(error) {
console.log('アップロードエラー:', error);
},
onProgress: function(bytesUploaded, bytesTotal) {
const progress = (bytesUploaded / bytesTotal * 100).toFixed(2);
console.log('アップロード進捗:', progress + '%');
},
onSuccess: function() {
console.log('アップロード完了');
}
});
upload.start();

上記のコードでは、fileはアップロードするファイルオブジェクトを表しています。endpointはアップロード先のエンドポイントURLを指定します。retryDelaysは、リトライの遅延時間を指定する配列です。metadataは、アップロードするファイルに関する追加のメタデータを指定するオブジェクトです。onError、onProgress、onSuccessは、それぞれエラー、進捗、および成功時のコールバック関数です。

このようにして、TUS JavaScriptクライアントを使用してファイルのアップロードを行うことができます。ここでは、基本的な初期化例を示しましたが、さまざまなオプションやイベントハンドラーを使用して、より高度なアップロード機能を実装することもできます。