一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

一步一步教你使用aliyun-oss-sdk.js进行浏览器上传文件到oss

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

阿里云oss现在已经支持浏览器端调用sdk直接上传到oss,避免经过应用服务器中转上传oss造成的瓶颈。

目前阿里云oss上传的方式分为accessid与sts临时权限id,具体可以在阿里云中设置

今天我们说第一种直接通过

一、新建oss bucket

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

名称我们取一个唯一的名字,一般是网站域名中间部分开头,例如bfwdemo,记住endpoint,这个在上传的代码配置中需要用到

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

二、新建子用户及accesskey

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

点开access key后,选择开始使用子用户accesskey

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

登录名称和显示名称填写oss bucket名称bfwdemo,并勾选编程访问

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

然后弹出手机验证码验证

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

创建完用户后我们新增一个该用户的accesskey

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

拖到最下面,创建新的accesskey

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

这一步记得保存accesskeyid与accesskeysecret,js代码中会用到

三、设置子用户oss bucket权限

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

四、设置oss bucket跨域

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss
设置如下:

一步一步教你使用阿里云aliyun-oss-sdk.js进行浏览器上传文件到oss

五、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',
          ...

点击查看剩余70%

{{collectdata}}

网友评论0