如何在Angular中实现华为OBS Bucket照片上传？

前置准备 #

你已获取的以下信息需妥善保管，后续配置会用到：

• Access Key（访问密钥ID）
• Secret Key（私有访问密钥）
• Bucket 名称
• Bucket 访问域名（即你提到的Bucket URL）

方案一：使用华为OBS JavaScript SDK（推荐） #

借助官方SDK可大幅简化上传逻辑，无需手动处理签名等复杂步骤：

1. 安装SDK
   在Angular项目根目录执行命令：

npm install esdk-obs-browserjs --save

2. 初始化OBS客户端
   在组件或服务中引入SDK并完成初始化：

import ObsClient from 'esdk-obs-browserjs';

// 替换为你的实际配置
const obsClient = new ObsClient({
  access_key_id: '你的Access Key',
  secret_access_key: '你的Secret Key',
  server: '你的Bucket URL（例如：obs.cn-north-1.myhuaweicloud.com）'
});

3. 编写上传函数
   实现照片上传逻辑，绑定到文件选择事件：

uploadPhoto(file: File): void {
  obsClient.putObject({
    Bucket: '你的Bucket名称',
    Key: `photos/${file.name}`, // 可自定义存储路径，避免文件名冲突
    SourceFile: file,
    ContentType: file.type
  }, (err, result) => {
    if (err) {
      console.error('上传失败:', err);
      // 可在此添加失败提示逻辑
    } else {
      console.log('上传成功:', result);
      // 上传成功后可通过此地址访问文件：`${this.bucketUrl}/photos/${encodeURIComponent(file.name)}`
    }
  });
}

4. 添加文件选择控件
   在组件HTML模板中添加文件输入框：

<input type="file" accept="image/*" (change)="uploadPhoto($event.target.files[0])">

方案二：手动生成签名直传（无SDK依赖） #

若不想引入第三方SDK，可手动构造请求并生成合法签名：

1. 安装加密依赖

npm install crypto-js --save

2. 编写签名生成函数

import * as crypto from 'crypto-js';

generateSignature(method: string, bucket: string, key: string, timestamp: string): string {
  // 构造签名字符串
  const stringToSign = `${method}\n\n\n${timestamp}\n/${bucket}/${key}`;
  // 使用Secret Key进行HMAC-SHA256加密并转Base64
  return crypto.HmacSHA256(stringToSign, '你的Secret Key').toString(crypto.enc.Base64);
}

3. 构造上传请求

async uploadPhotoManual(file: File): Promise<void> {
  const key = `photos/${file.name}`;
  const timestamp = new Date().toUTCString();
  const signature = this.generateSignature('PUT', '你的Bucket名称', key, timestamp);

  const url = `${this.bucketUrl}/${encodeURIComponent(key)}`;
  const headers = new Headers({
    'Authorization': `AWS ${this.accessKey}:${signature}`,
    'Date': timestamp,
    'Content-Type': file.type
  });

  try {
    const response = await fetch(url, {
      method: 'PUT',
      headers: headers,
      body: file
    });
    response.ok ? console.log('上传成功') : console.error('上传失败:', await response.text());
  } catch (err) {
    console.error('请求异常:', err);
  }
}

关键注意事项 #

• 密钥安全：前端直接暴露Access/Secret Key存在被盗用风险，生产环境建议采用后端签名方案：前端向自有后端请求临时上传凭证，再用凭证向OBS上传文件。
• 跨域配置：需在华为OBS控制台给Bucket配置CORS规则，允许你的Angular应用域名发起PUT、OPTIONS请求。
• 大文件处理：单文件过大时，建议使用分片上传（SDK已内置分片逻辑，手动实现需参考OBS分片上传规范）。

内容的提问来源于stack exchange，提问作者Alberto Pereda Rojas