Principle Chapter I - Directly Uploading Files to BOS in the Browser
Principle Chapter I: Directly uploading files to BOS in the browser
If you're not using bce-bos-uploader, refer to the following steps to complete the process of uploading files directly to BOS via a browser.
- Enable cross-origin access settings for bucket
- Query ak/sk
- Initialize BOSClient
- Handling upload logic
Enable cross-origin access for bucket
Due to browser security restrictions, if you want to directly access the BOS service in the browser, you must correctly set the cross-origin function of the relevant bucket. For the setting method, please refer to [Enabling Cross-Origin Access for Bucket](BOS/Console Operation Guide/Managing Bucket/Set cross-origin access.md).
Initialization settings
1var bosConfig = {
2 credentials: {
3 ak: 'Query your ak from the Baidu AI Cloud console',
4 sk: 'Query the sk corresponding to the above ak from the Baidu AI Cloud console'
5 },
6 endpoint: 'http://bj.bcebos.com' // Configure the corresponding endpoint according to the region of the BOS service you use
7 };
8 var bucket = 'bce-javascript-sdk-demo-test'; // Set the bucket you want to operate on
9 var client = new baidubce.sdk.BosClient(bosConfig);Afterward, you can use the client instance to execute BOS-related operations.
Upload logic
File uploads can be performed by calling client.putObjectFromBlob(bucket, key, blob, options).
This function supports 4 parameters, among which options is optional. If you need to manually set the content-type of the file, you can put it in the options parameter. If not set manually, the default content-type is application/octet-stream. In addition, you can obtain some common content-types according to the suffix by calling baidubce.sdk.MimeType.guess(ext).
*Note: Due to a Firefox compatibility issue, if the uploaded file is of type text/, Firefox will automatically add charset=utf-8. Therefore, when setting the Content-Type for options, we need to manually add charset=utf-8; otherwise, the signature calculated by the browser will be inconsistent with that calculated by the server, resulting in upload failure.
1// Listen file upload events, assuming the page contains: <input type="file" id="upload" /> $('#upload').on('change', function (evt) {
2var file = evt.target.files[0]; // Get the file to be uploaded
3var key = file.name; // Key used when saving to BOS, you can modify it, use the file name as the key by default
4 var blob = file;
5
6 var ext = key.split(/\./g).pop();
7 var mimeType = baidubce.sdk.MimeType.guess(ext);
8 if (/^text\//.test(mimeType)) {
9 mimeType += '; charset=UTF-8';
10 }
11 var options = {
12 'Content-Type': mimeType
13 };
14
15 client.putObjectFromBlob(bucket, key, blob, options)
16 .then(function (res) {
17// Upload completed, add your code here
18console.log('uploaded successfully');
19 })
20 .catch(function (err) {
21// Upload failed, add your code here
22 console.error(err);
23 });
24 });To monitor the current upload progress, you can listen to the progress event.
1 client.on('progress', function (evt)
2 {
3 // Monitor upload progress
4 if (evt.lengthComputable)
5 {
6 // Add your code
7 var percentage = (evt.loaded / evt.total) * 100;
8 console.log('Uploading, uploaded' + percentage + '%');
9 }
10 });