对象存储BOS

    原理篇一:在浏览器中直接上传文件到BOS

    原理篇一:在浏览器中直接上传文件到BOS

    如您不使用 bce-bos-uploader ,可以参考下面的内容完成如何在浏览器中直接上传文件到 BOS 。使用流程:

    1. 开启 Bucket 的跨域访问设置
    2. 查询 ak/sk
    3. 初始化 BosClient
    4. 处理上传逻辑

    开启 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 + '%');
         }
     });
    上一篇
    进阶篇二:通过PostObject接口处理IE低版本
    下一篇
    原理篇二:大文件分块上传