这一小节将会指导您如何在浏览器中直接上传文件到BOS中。
受浏览器安全限制,如果想直接在浏览器中访问BOS服务,必须正确设置好相关bucket的跨域功能。设置方法如下:
如下图所示:
注意:Origins里面的配置,不应该有最后的 '/'。例如:https://*.github.io/ 是错误的配置
var bosConfig = { credentials: { ak: '从开放云控制台查询您的ak', sk: '从开放云控制台查询上面这个ak所对应的sk' }, endpoint: 'http://bos.bj.baidubce.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 + '%'); } });