一步一步教你使用aliyun-oss-sdk.js进行浏览器上传文件到oss
阿里云oss现在已经支持浏览器端调用sdk直接上传到oss，避免经过应用服务器中转上传oss造成的瓶颈。
目前阿里云oss上传的方式分为accessid与sts临时权限id，具体可以在阿里云中设置
今天我们说第一种直接通过
一、新建oss bucket
名称我们取一个唯一的名字，一般是网站域名中间部分开头，例如bfwdemo，记住endpoint，这个在上传的代码配置中需要用到
二、新建子用户及accesskey
点开access key后，选择开始使用子用户accesskey
登录名称和显示名称填写oss bucket名称bfwdemo，并勾选编程访问
然后弹出手机验证码验证
创建完用户后我们新增一个该用户的accesskey
拖到最下面，创建新的accesskey
这一步记得保存accesskeyid与accesskeysecret，js代码中会用到
三、设置子用户oss bucket权限
四、设置oss bucket跨域
五、js上传代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["aliyun-oss-sdk.min"], function() {
const client = new OSS({
region: 'oss-cn-beijing',
accessKeyId: 'LTAI4FxV5ZvuoQ1mF5XhhuG5',
accessKeySecret: 'IYw8mnQgLj6Q7GRhhB9tzqiLz3VRqi',
bucket: 'bfwtest',
});
client.list().then((result) => {
console.log('objects: %j', result.objects);
return client.put('my-obj', new OSS.Buffer('hello world'));//上传
}).then((result) => {
console.log('put result: %j', result);
return client.get('my-obj');//获取
}).then((result) => {
console.log('get result: %j', result.content.toString());
});
});
});
</script>
<style>
</style>
</head>
<body>
查看console控制台
</body>
</html>那么文件file怎么上传呢<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
document.querySelector("#myfile").onchange = function() {
use(["aliyun-oss-sdk.min"], function() {
const client = new OSS({
region: 'oss-cn-beijing',
accessKeyId: 'LTAI4FxV5ZvuoQ1mF5XhhuG5',
accessKeySecret: 'IYw8mnQgLj6Q7GRhhB9tzqiLz3VRqi',
bucket: 'bfwtest',
});
client.put('/img/uploadfil.png', document.querySelector("#myfile").files[0]).then(function(res){
alert("上传成功"+res.url);
});
});
};
});
</script>
<style>
</style>
</head>
<body>
<h1>js实现上传本地文件到阿里云OSS</h1>
<input type="file" id="myfile" name="myfile" />
</body>
</html>
{{collectdata}}
网友评论0