This topic provides answers to some commonly asked questions about OSS SDK for Browser.js.
How do I call STS?
The environment of a browser is untrusted. It is highly risky to store your AccessKey ID and AccessKey secret in a browser. We recommend that you use an STS token to call the OSS API in the browser environment. For more information, see What is STS?
After you obtain the STS token, you can initialize 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>
How do I enable HTTPS access?
When you initialize the SDK, you can enable HTTPS access by specifying secure:true. For more information, see Initialization.
How do I solve CORS issues in a browser?
Before you use the SDK in a browser, you need to configure CORS rules for the bucket. For more information, see Installation.
How do I configure the user-defined data (meta), file type (mime), and request header (header) for the file to be uploaded?
For more information, see Simple upload.
How do I perform resumable upload in a browser?
Save the checkpoint to the local storage of the browser and specify the checkpoint parameter in the next call to perform resumable upload. For more information, see Resumable upload.
How do I upload an object to a specified directory?
Add the specified prefix to the name of the object that you want to 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);
});
How do I upload Base64-encoded images?
Base64 first transcodes images into specified formats and calls OSS upload operations to upload the images. For more information, visit 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);
});
};
How do I limit the size of the object that you want to upload?
The size (in bytes) of the object that you want to upload can be obtained from the browser by using document.getElementById("file").files[0].size. For more information, see Overview of uploading objects to OSS from web clients.
How do I obtain the upload progress?
You can use multipart upload to obtain the upload progress. For more information, see Multipart upload.
How do I obtain the download progress?
The download progress cannot be obtained from the browser. You can call the signatureUrl method to obtain the download address. For more information, see Preview or download an object.
How do I obtain the signed URL of an object?
You can call the signatureUrl method to obtain the download address. For more information, see Preview or download an object.
How do I use the signed URL generated by OSS SDK for Browser.js to upload resources?
Signed URLs are often used to authorize third parties to download and upload resources. For download operations, see the answer to the preceding question. The signatureUrl API provided by OSS SDK for Browser.js is used to return a signed URL and users can use this URL to upload or download resources directly. For more information about how to upload resources by using signed URLs, visit GitHub.
How do I use form upload to upload resources to OSS?
For more information, see Overview of uploading objects to OSS from web clients.
How do I run sample projects?
Go to ali-oss/example and run npm run start.
How do I configure upload callbacks?
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',
},
},For more information about upload callbacks, see Add signatures on the server, configure upload callbacks, and directly transfer data.
Does the browser support browsing files in chunks?
No.
How do I use OSS SDK for Browser.js to collect logs?
For more information, visit GitHub.