このトピックでは、Browser.js SDK に関するよくある質問とその解決策について説明します。
STS の呼び出し方法
ブラウザは信頼できない環境です。AccessKey ID と AccessKey Secret をブラウザに直接保存すると、高いセキュリティ脅威をもたらします。ブラウザで OSS API 操作を呼び出すには、セキュリティトークンサービス (STS) モードを使用してください。
STS トークンを取得した後、SDK を初期化します。
<script type="text/javascript">
$.ajax("http://your_sts_server/",{method: 'GET'},function (err, result) {
let client = new OSS({
authorizationV4: true,
accessKeyId: result.AccessKeyId,
accessKeySecret: result.AccessKeySecret,
stsToken: result.SecurityToken,
region: 'yourRegion',
bucket: 'yourBucketName'
});
});
</script>
HTTPS アクセスの有効化
HTTPS アクセスを有効にするには、SDK の初期化時に secure:true を設定します。詳細については、「初期化 (Browser.js SDK)」をご参照ください。
ブラウザでのクロスドメイン問題の解決
ブラウザで SDK を使用する前に、バケットのクロスドメインルールを設定する必要があります。詳細については、「事前準備」をご参照ください。
アップロードファイルへのユーザー定義メタデータ、MIME タイプ、リクエストヘッダーの設定
詳細については、「シンプルアップロード (Browser.js SDK)」をご参照ください。
ブラウザでの再開可能なアップロードの仕組み
チェックポイントをブラウザのローカルストレージに保存します。次回の呼び出しでチェックポイントパラメーターを渡すことで、アップロードを再開します。詳細については、「再開可能なアップロード (Browser.js SDK)」をご参照ください。
特定のフォルダへのファイルのアップロード
特定のフォルダにファイルをアップロードするには、オブジェクト名にプレフィックスを指定します。
let OSS = require('ali-oss')
let client = new OSS({
authorizationV4: true,
region: 'yourRegion',
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
bucket: 'yourBucketName'
});
client.multipartUpload('base-dir/' +'object-key', 'local-file', {
progress: async function (p) {
console.log('Progress: ' + p);
}
});
console.log(result);
}).catch((err) => {
console.log(err);
});
Base64 エンコードされたイメージのアップロード
まず、Base64 データを指定されたフォーマットのイメージに変換します。次に、OSS アップロード操作を呼び出してイメージをアップロードします。詳細については、GitHub の例をご参照ください。
/**
* Base64 をファイルに変換します。
* @param dataurl Base64 コンテンツ。
* @param filename 意味のあるサフィックスを設定します。オプションで MIME タイプを設定することもできます。
* @returns {File|*}
*/
const dataURLtoFile = function dataURLtoFile(dataurl, filename) {
const arr = dataurl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });// 環境が File をサポートしている場合は、これも使用できます: return new File([u8arr], filename, { type: mime });
};
// client は OSS クライアントインスタンスです。
const uploadBase64Img = function uploadBase64Img(client) {
// Base64 コンテンツ。
const base64Content = 'data:image:****';
const filename = 'img.png';
const imgfile = dataURLtoFile(base64Content, filename);
// key はアップロード用のオブジェクトキーです。imgFile は dataURLtoFile によって処理された後に返されるイメージです。
client.multipartUpload(key, imgfile).then((res) => {
console.log('upload success: %j', res);
}).catch((err) => {
console.error(err);
});
};アップロードファイルのサイズの制限
ブラウザでは、`document.getElementById("file").files[0].size` からアップロードファイルのサイズをバイト単位で取得できます。POST リクエストの詳細については、「ブラウザから OSS へのデータのアップロード」をご参照ください。
アップロードの進捗状況の取得
マルチパートアップロードを使用すると、アップロードの進捗状況を取得できます。詳細については、「マルチパートアップロード (Browser.js SDK)」をご参照ください。
ダウンロードの進捗状況の取得
ブラウザではダウンロードの進捗状況を取得できません。signatureUrl メソッドを呼び出してダウンロード URL を取得します。詳細については、「リファレンス」をご参照ください。
オブジェクトの署名付き URL の取得
signatureUrl メソッドを呼び出してダウンロード URL を取得できます。詳細については、「ファイルのプレビューまたはダウンロード (Browser.js SDK)」をご参照ください。
SDK で生成された署名付き URL を使用したリソースのアップロード
署名付き URL は、リソースのアップロードやダウンロードのためにサードパーティにアクセスを許可するためによく使用されます。SDK は、署名付き URL を返す signatureUrl メソッドを提供します。この URL を使用して、リソースをアップロードまたはダウンロードできます。署名付き URL を使用してリソースをアップロードする方法については、SDK プロジェクトの例：「署名付き URL を使用したリソースのアップロードの例」をご参照ください。
フォームを使用した OSS サーバーへのリソースのアップロード
詳細については、「ブラウザから OSS へのデータのアップロード」をご参照ください。
サンプルプロジェクトの実行
`ali-oss/example` ディレクトリに移動し、 npm run start を実行します。
アップロードコールバックの追加
const uploadFile = function uploadFile(client) {
if (!uploadFileClient || Object.keys(uploadFileClient).length === 0) {
uploadFileClient = client;
}
const file = document.getElementById('file').files[0];
const key = document.getElementById('object-key-file').value.trim() || 'object';
console.log(`${file.name} => ${key}`);
const options = {
progress,
partSize: 500 * 1024,
timeout:60000,
meta: {
year: 2017,
people: 'test',
},
callback: {
// アップロードコールバックが追加される場所。
url: 'https://example.aliyundoc.com/v2/sync',
/* host: 'oss-cn-shenzhen.aliyuncs.com', */
/* eslint no-template-curly-in-string: [0] */
body: 'bucket=${bucket}&object=${object}&var1=${x:var1}',
contentType: 'application/x-www-form-urlencoded',
customValue: {
var1: 'value1',
var2: 'value2',
},
},アップロードコールバックの詳細については、「仕組み」をご参照ください。
ブラウザはチャンクごとのファイル閲覧をサポートしているか
いいえ、サポートしていません。
OSS JS SDK でのログの収集
詳細については、GitHub をご参照ください。