对象存储BOS

    基础篇:在浏览器中直接上传文件到BOS

    使用流程

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

    1. 开启 Bucket 的跨域访问设置
    2. 查询 ak/sk
    3. 初始化 bce-bos-uploader 参数

    开启 Bucket 的跨域访问

    受浏览器安全限制,如果想直接在浏览器中访问 BOS 服务,必须正确设置好相关 bucket 的跨域功能。设置方法如下:

    1. 登录百度智能云控制台。
    2. 选择 Bucket 并进入 Bucket 管理页面。
    3. 点击左侧『Bucket 属性』,进入 Bucket 配置的页面。
    4. 点击右侧『CORS 设置』,进入 CORS 设置页面。
    5. 点击『添加规则』按钮,可以添加一条或者多条 CORS 的规则。

    查询 AK/SK

    在百度智能云控制台首页右上角账号下的“安全认证”查询AK和SK的信息,也可以在 Bucket 管理中查看。详细操作可参见管理ACCESSKEY

    获取 bce-bos-uploader

    有两种方式可以获取 bce-bos-uploader 的代码:

    • 第一种:通过 npm 安装

      npm install @baiducloud/bos-uploader
    • 第二种:直接引用 CDN 上面的资源(测试专用,不建议用于生产环境)

      <script src=" https://bj.bcebos.com/v1/bce-cdn/lib/@baiducloud/bos-uploader/<version>/bce-bos-uploader.bundle.min.js"></script>

    初始化 bce-bos-uploader

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>bce-bos-uploader simple demo</title>
        <!--[if lt IE 8]><script src="https://unpkg.com/json3@3.3.2/lib/json3.min.js"></script><![endif]-->
        <!--[if lt IE 9]><script src="https://unpkg.com/js-polyfills@0.1.42/es5.js"></script><![endif]-->
        <!--[if lt IE 10]><script src="https://unpkg.com/mOxie@1.5.7/bin/js/moxie.min.js"></script><![endif]-->
        <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
        <script src="https://bce.bdstatic.com/lib/@baiducloud/bos-uploader/1.4.0-rc.0/bce-bos-uploader.bundle.min.js"></script>
      </head>
      <body>
        <input type="file" id="file" >
        <button type="submit">开始上传</button>
        <script>
          var uploader = new baidubce.bos.Uploader({
          browse_button: '#file',
          bos_bucket: '<your bucket>',
          bos_endpoint: '<your host>',
          bos_ak: '<your ak>', 
          bos_sk: '<your sk>',
          max_file_size: '1Gb',
          init: {
            FileUploaded: function (_, file, info) {
              var bucket = info.body.bucket;
              var object = info.body.object;
              var url = '<your host>' + bucket + '/' + object;
              $(document.body).append($('<div><a href="' + url + '">' + url + '</a></div>'));
            },
            UploadComplete: function() {
              $(document.body).append('<div>上传结束!</div>');
            }
          }
        });
         $('button[type=submit]').click(function () {
          uploader.start();
          return false;
        });
    
        </script>
      </body>
    </html>

    将上述代码保存为 index.html,下面会启动 webserver 来访问这个页面

    启动 webserver

    • 通过 PHP 来启动

      php -S 0.0.0.0:9999
    • 通过 Python 来启动

      python -m SimpleHTTPServer 9999
    • 其它方式请参考相关的文档

    启动 webserver 之后,在浏览器里面访问http://localhost:9999/index.html打开刚才的页面,开始测试是否可以正常上传。

    上一篇
    AWS-lambda同步S3数据到BOS
    下一篇
    进阶篇一:STS临时认证