使用前端JS上传文件到阿里云的OSS服务器，PHP生成STS临时访问凭证

fendouweiqian

已于 2023-07-06 23:02:57 修改

阅读量1k

点赞数 2

文章标签：前端 javascript 阿里云

于 2023-07-06 15:53:03 首次发布

本文链接：https://blog.csdn.net/fendouweiqian/article/details/131578387

版权

官方教程地址：https://help.aliyun.com/document_detail/383950.html?spm=a2c4g.383952.0.0
这篇文章主要是指出官方教程没有说明的地方

后端代码

并非是完全完全不需要后端的参与。需要后端生成凭证，防止秘钥泄露

这里是官方的说明文档：使用STS临时访问凭证访问OSS

按照官方说法来到第五步
第五步只提供了Java代码，并且PHP的SDK中说明，缺少了一个步骤
PHP的SDK中说明需要引入如下SDK

composer require alibabacloud/sts-20150401

这里还缺少一个SDK的引入，如下

composer require "alibabacloud/client"

使用Thinkphp的实现代码如下：


namespace app\api\controller;

use OSS\Core\OssException;
use OSS\OssClient;
use Qiniu\Auth;
use Qiniu\Storage\UploadManager;
use think\Config;
use think\Controller;
use think\Debug;
use think\Request;
use think\Session;

use AlibabaCloud\Client\AlibabaCloud;
use AlibabaCloud\Client\Exception\ClientException;
use AlibabaCloud\Client\Exception\ServerException;

class Upload extends Controller
{
 	/**
     * 阿里云Sts凭证
     */
    public function getStsToken()
    {
        $accessKeyId = "你自己在阿里云设置的RAM的accessKeyId"; // 你自己的
        $accessKeySecret = "你自己在阿里云设置的RAM的accessKeySecret"; // 你自己的
        $roleArn = "你自己在阿里云设置的RAM的roleArn";  // 角色访问控制 RoleArn，你在设置的
        $roleSessionName = "ramosstest"; // 临时凭证名称，随意

        AlibabaCloud::accessKeyClient($accessKeyId, $accessKeySecret)
            ->regionId('cn-hongkong')
            ->asDefaultClient();

        try {
            $result = AlibabaCloud::rpc()
                ->product('Sts')
                ->scheme('https') // https | http
                ->version('2015-04-01')
                ->action('AssumeRole')
                ->method('POST')
                ->host('sts.aliyuncs.com')
                ->options([
                    'query' => [
                        'RegionId' => "cn-hongkong",
                        'RoleArn' => $roleArn,
                        'RoleSessionName' => $roleSessionName,
                    ],
                ])
                ->request();

            echo "<pre>";
            return print_r($result->toArray());
        } catch (ClientException $e) {
            return json($e->getErrorMessage());
        } catch (ServerException $e) {
            return json($e->getErrorMessage());
        }
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
<button id="upload">上传</button>
<input id="file" type="file" />
<!--导入SDK文件-->
<script
        type="text/javascript"
        src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"
></script>
<script type="text/javascript">
    const client = new OSS({
        region: 'oss-cn-hongkong',
        accessKeyId: 'STS.后端代码调用生成的accessKeyId',
        accessKeySecret: '后端代码调用生成的accessKeySecret',
        stsToken: '后端代码调用生成的SecurityToken',
        bucket: 'kdlbook-hongkong'
    });

    let data;
    const upload = document.getElementById("upload");

    async function putObject (data, originalFilename, originalFileExtension) {
        try {
        	// 我这里做了一些小的变更，采用的原始文件名+随机字符串来防止文件重复，当然也可以采用日期的格式
            let newFilename = `${originalFilename}_${Math.random()}${originalFileExtension}`;
            const result = await client.put(
                `${newFilename}`,
                data
            );
            alert("上传结果完成，返回文件名为:"+result.name);
            console.log(result);
        } catch (e) {
            console.log(e);
        }
    }

    upload.addEventListener("click", () => {
        data = document.getElementById("file").files[0];
        let originalFilename = data.name.substring(0, data.name.lastIndexOf('.'));
        let originalFileExtension = data.name.substring(data.name.lastIndexOf('.'));
        putObject(data, originalFilename, originalFileExtension);
    });
</script>
</body>
</html>

需要注意的问题

官方文档里面有一个上传回调，但是这里并不需要，是同步回调的，虽然F12里面没有看到接口的返回值
由于是JS请求，存在跨域问题，需要设置跨域请求。官方文档：https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.375302.0.i3
You have no right to access this object because of bucket acl.
这个需要开启访问权限，可以F12查看返回内容类似如下

<Error> <Code>AccessDenied</Code> 
<Message>You have no right to access this object because of bucket acl.</Message> 
<RequestId>622FF5149849B43239F0C519</RequestId> <HostId>bucketbylz.oss-cn-beijing.aliyuncs.com</HostId> 
</Error>

这种情况是文件已经上传成功了，只是访问权限有限制。
文档地址：https://help.aliyun.com/document_detail/100676.html?spm=a2c4g.450754.0.i2#concept-blw-yqm-2gb
在这里插入图片描述

fendouweiqian

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用前端JS上传文件到阿里云的OSS服务器，PHP生成STS临时访问凭证

官方教程地址：https://help.aliyun.com/document_detail/383950.html?第五步只提供了Java代码，并且PHP的SDK中说明，缺少了一个步骤。这篇文章主要是指出官方教程没有说明的地方。PHP的SDK中说明需要引入如下SDK。这里还缺少一个SDK的引入，如下。
复制链接

扫一扫