原理篇一：在浏览器中直接上传文件到BOS
如您不使用 bce-bos-uploader ，可以参考下面的内容完成如何在浏览器中直接上传文件到 BOS 。使用流程：
- 开启 Bucket 的跨域访问设置
- 查询 ak/sk
- 初始化 BosClient
- 处理上传逻辑
开启 Bucket 的跨域访问
受浏览器安全限制，如果想直接在浏览器中访问 BOS 服务，必须正确设置好相关 bucket 的跨域功能。设置方法请参考开启 Bucket 的跨域访问。
初始化设置
var bosConfig = {
credentials: {
ak: '从百度智能云控制台查询您的ak',
sk: '从百度智能云控制台查询上面这个ak所对应的sk'
},
endpoint: 'http://bj.bcebos.com' // 根据您选用bos服务的区域配置相应的endpoint
};
var bucket = 'bce-javascript-sdk-demo-test'; // 设置您想要操作的bucket
var client = new baidubce.sdk.BosClient(bosConfig);
后续我们可以使用 client 这个实例来进行 BOS 相关操作。
上传逻辑
我们可以通过调用 client.putObjectFromBlob(bucket, key, blob, options) 来完成文件的上传操作。
这个函数支持4个参数，其中 options 是可选的。如果需要手工设置文件的的 Content-Type，可以放到 options 参数里面。 如果没有手工设置，默认的 Content-Type 是 application/oceat-stream 。 另外，可以通过调用 baidubce.sdk.MimeType.guess(ext) 来根据后缀名得到一些常用的 Content-Type 。
注意：因为 Firefox 兼容性的一个问题，如果上传的文件是 text/* 类型，Firefox 会自动添加 charset=utf-8 因此我们给 options 设置 Content-Type 的时候，需要手工加上 charset=utf-8，否则会导致浏览器计算的签名跟服务器计算的签名不一致，导致上传失败。
// 监听文件上传的事件，假设页面中有：<input type="file" id="upload" /> $('#upload').on('change', function (evt) {
var file = evt.target.files[0]; // 获取要上传的文件
var key = file.name; // 保存到bos时的key，您可更改，默认以文件名作为key
var blob = file;
var ext = key.split(/\./g).pop();
var mimeType = baidubce.sdk.MimeType.guess(ext);
if (/^text\//.test(mimeType)) {
mimeType += '; charset=UTF-8';
}
var options = {
'Content-Type': mimeType
};
client.putObjectFromBlob(bucket, key, blob, options)
.then(function (res) {
// 上传完成，添加您的代码
console.log('上传成功');
})
.catch(function (err) {
// 上传失败，添加您的代码
console.error(err);
});
});
如果想获悉当前上传的进度，可以监听 progress 事件。
client.on('progress', function (evt)
{
// 监听上传进度
if (evt.lengthComputable)
{
// 添加您的代码
var percentage = (evt.loaded / evt.total) * 100;
console.log('上传中，已上传了' + percentage + '%');
}
});
