基础篇：在浏览器中直接上传文件到BOS
更新时间：2023-01-05
使用流程
使用 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打开刚才的页面，开始测试是否可以正常上传。