前端直传华为云OBS

本文详细介绍了如何使用前端将图片直接上传到华为云的对象存储服务OBS。首先,需要在华为云开通OBS并获取访问密钥。然后,引入OBS的JavaScript SDK到项目中。接着,创建ObsClient实例,并使用putObject方法上传文件,指定Bucket名、存储的Key和文件源。上传成功后,可以通过域名结合Key访问图片。建议使用后台生成签名认证方式进行更安全的上传。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文是用前端将图片直传华为云OBS,可供参考。(比较好的方式是建议使用后台生成签名认证方式上传)

1.在华为云开通OBS对象存储

2.下载js sdk引入项目中

3. 首先创建实例

// 创建ObsClient实例
var obsClient = new ObsClient({
    access_key_id: '*** Provide your Access Key ***',       
    secret_access_key: '*** Provide your Secret Key ***',       
    server : 'https://your-endpoint'
});

以上参数可以从控制台找到

5.上传图片。采用文件上传方式 

et file = event.target.files[0]

    &n
### 华为云 OBS 前端直传实现方法 为了实现在前端直接上传文件至华为云OBS,需先初始化 `ObsClient` 并设置必要的认证参数。这包括访问密钥 ID (`access_key_id`) 和秘密访问密钥 (`secret_access_key`) 以及服务地址 (`server`)。 ```javascript import { ObsClient } from 'obs'; const obsClient = new ObsClient({ access_key_id: 'xxxx', secret_access_key: 'xxxxxxx', server: 'https://xxxxxx' }); ``` 当准备上传文件时,调用 `putObject` 方法并传递目标桶名称 (`Bucket`)、对象键 (`Key`) 及源文件路径或流 (`SourceFile`) 参数[^1]: ```javascript function uploadToObs(params) { obsClient.putObject({ Bucket: 'xxxxx', // 替换为目标存储桶的名字 Key: params.Key, SourceFile: params.SourceFile, }, function (err, result) { if (!err && result.CommonMsg.Status < 300) { console.log('Upload succeeded'); } else { console.error('Failed to upload:', err); } }); } ``` 对于签名验证部分,在请求头部加入由特定算法生成的签名字符串作为身份验证机制的一部分。此过程通常涉及 HMAC-SHA1 或者其他安全哈希函数的应用,并最终形成形如 `Authorization: OBS AccessKeyID:Signature` 的授权字段[^2]。 完成上传之后 若要展示已上传的对象,则可通过构建相应的 URL 来获取资源链接。该链接应遵循如下模式:`<your-domain>/<bucket-name>/<object-key>` ,其中 `<your-domain>` 是指定了 SSL/TLS 认证后的合法域名;如果未配置 HTTPS 则采用 HTTP 方式访问[^3]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值