このトピックでは、OSS SDK for Browser.jsに関するよくある質問に対する回答を提供します。
STSを呼び出すにはどうすればよいですか?
ブラウザの環境は信頼できません。 AccessKey IDとAccessKeyシークレットをブラウザに保存するのは非常に危険です。 STSトークンを使用して、ブラウザー環境でOSS APIを呼び出すことを推奨します。 詳細については、「」をご参照ください。STSとは何ですか?
STSトークンを取得したら、OSS SDK for Browser.jsを初期化できます。
<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アクセスを有効にするにはどうすればよいですか。
SDKを初期化するときに、secure:true
を指定してHTTPSアクセスを有効にできます。 詳細については、「初期化」をご参照ください。
ブラウザでCORSの問題を解決するにはどうすればよいですか?
ブラウザでSDKを使用する前に、バケットのCORSルールを設定する必要があります。 詳細については、「インストール」をご参照ください。
アップロードするファイルのユーザー定義データ (メタ) 、ファイルタイプ (mime) 、およびリクエストヘッダー (ヘッダー) を設定するにはどうすればよいですか。
詳細は、「簡易アップロード (Simple upload)」をご参照ください。
ブラウザで再開可能なアップロードを実行するにはどうすればよいですか?
チェックポイントをブラウザのローカルストレージに保存し、再開可能なアップロードを実行するための次の呼び出しでチェックポイントパラメーターを指定します。 詳細については、「再開可能なアップロード」をご参照ください。
指定したディレクトリにオブジェクトをアップロードするにはどうすればよいですか?
アップロードするオブジェクトの名前に、指定したプレフィックスを追加します。
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-encoded画像をアップロードするには?
Base64は、最初に画像を指定された形式にトランスコードし、OSSアップロード操作を呼び出して画像をアップロードします。 詳細については、『GitHub』をご参照ください。
/**
* base64 to file
* @param dataurl base64 content
* @param filename set up a meaningful suffix, or you can set mime type in options
* @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 });// if env support File, also can use this: return new File([u8arr], filename, { type: mime });
};
// The client indicates the OSSClient instance.
const uploadBase64Img = function uploadBase64Img(client) {
// The content is in the Base64 format.
const base64Content = 'data:image:****';
const filename = 'img.png';
const imgfile = dataURLtoFile(base64Content, filename);
// key indicates the uploaded object key and imgFile indicates the returned images after they are processed by using dataURLtoFile.
client.multipartUpload(key, imgfile).then((res) => {
console.log('upload success: %j', res);
}).catch((err) => {
console.error(err);
});
};
アップロードするオブジェクトのサイズを制限するにはどうすればよいですか?
アップロードするオブジェクトのサイズ (バイト単位) は、document.getElementById("file").files[0].sizeを使用してブラウザから取得できます。 詳細については、「webクライアントからOSSへのオブジェクトのアップロードの概要」をご参照ください。
アップロードの進行状況を取得するにはどうすればよいですか?
マルチパートアップロードを使用して、アップロードの進行状況を取得できます。 詳しくは、「マルチパートアップロード」をご参照ください。
ダウンロードの進行状況を取得するにはどうすればよいですか?
ダウンロードの進捗状況はブラウザから取得できません。 signatureUrl
メソッドを呼び出して、ダウンロードアドレスを取得できます。 詳細については、「オブジェクトのプレビューまたはダウンロード」をご参照ください。
オブジェクトの署名付きURLを取得するにはどうすればよいですか?
signatureUrl
メソッドを呼び出して、ダウンロードアドレスを取得できます。 詳細については、「オブジェクトのプレビューまたはダウンロード」をご参照ください。
OSS SDK for Browser.jsによって生成された署名付きURLを使用してリソースをアップロードするにはどうすればよいですか?
署名付きURLは、第三者にリソースのダウンロードとアップロードを許可するためによく使用されます。 ダウンロード操作については、上記の質問に対する回答を参照してください。 OSS SDK for Browser.jsが提供するsignatureUrl APIは、署名付きURLを返すために使用され、ユーザーはこのURLを使用してリソースを直接アップロードまたはダウンロードできます。 署名付きURLを使用してリソースをアップロードする方法の詳細については、『GitHub』をご参照ください。
フォームアップロードを使用してリソースをOSSにアップロードする方法を教えてください。
詳細については、「webクライアントから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: {
// Specify the location of the upload 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 SDK for Browser.jsを使用してログを収集するにはどうすればよいですか?
詳細については、『GitHub』をご参照ください。