所有文档

          对象存储 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临时认证