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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

使用流程

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

特别说明：bce-bos-uploader 已不再更新维护，直传BOS推荐使用JS SDK

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

开启 Bucket 的跨域访问

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

登录百度智能云控制台。
选择 Bucket 并进入 Bucket 管理页面。
点击左侧『Bucket 属性』，进入 Bucket 配置的页面。
点击右侧『CORS 设置』，进入 CORS 设置页面。
点击『添加规则』按钮，可以添加一条或者多条 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打开刚才的页面，开始测试是否可以正常上传。