服務(wù)端生成簽名URL：

const express = require("express");
const mime = require("mime");
const OSS = require("ali-oss");
const app = express();
const port = 3000; // 監(jiān)聽端口

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.post("/get_sign_url", async (req, res) => {
  const {
    fileName,
    method,
    headers = {},
    queries = {},
    additionalHeaders = [],
  } = req.body; // 從body中解析出數(shù)據(jù)
  const client = new OSS({
    region: "yourRegion",
    accessKeyId: "yourstsAccessKey",
    accessKeySecret: "yourstsAccessKeySecret",
    stsToken: "yourSTSToken",
    bucket: "yourBucket",
    authorizationV4: true,
  });

  const reqHeaders = {
    ...headers,
  };

  // 處理一下content-type
  if (fileName && method === "PUT") {
    const fileNameSplit = fileName.split(".");

    reqHeaders["content-type"] = mime.getType(
      fileNameSplit.length > 1 ? fileNameSplit[fileNameSplit.length - 1] : ""
    );
  }

  // 生成V4簽名URL
  const url = await client.signatureUrlV4(
    method,
    300,
    {
      headers: reqHeaders,
      queries,
    },
    fileName,
    additionalHeaders
  );

  res.json({
    url,
    contentType: reqHeaders["content-type"],
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

在客戶端獲取簽名并使用簽名URL上傳文件：

import { http } from '@kit.NetworkKit';
import fs from '@ohos.file.fs';
import { request } from './request';

const serverUrl = 'http://x.x.x.x:3000/get_sign_url'; // 獲取簽名URL的服務(wù)器URL

/**
 * getSignUrl返回?cái)?shù)據(jù)
 */
export interface ISignUrlResult {
  /** 簽名URL */
  url: string;
  /** content-type */
  contentType?: string;
}

/**
 * 獲取簽名URL
 * @param fileName 文件名稱
 * @param req 用于生成V4簽名URL的請(qǐng)求信息
 * @param req.method 請(qǐng)求方式
 * @param [req.headers] 請(qǐng)求頭
 * @param [req.queries] 請(qǐng)求查詢參數(shù)
 * @param [req.additionalHeaders] 加簽的請(qǐng)求頭
 */
const getSignUrl = async (fileName: string, req: {
  method: 'GET' | 'POST' | 'PUT';
  headers?: Record<string, string | number>;
  queries?: Record<string, string>;
  additionalHeaders?: string[];
}): Promise<ISignUrlResult> => {
  console.info('in getSignUrl');

  try {
    const response = await request(serverUrl, {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      extraData: {
        fileName,
        method: req.method,
        headers: req.headers,
        queries: req.queries,
        additionalHeaders: req.additionalHeaders
      },
      expectDataType: http.HttpDataType.OBJECT
    }, 200);
    const result = response.result as ISignUrlResult;

    console.info('success getSignUrl');

    return result;
  } catch (err) {
    console.info('getSignUrl request error: ' + JSON.stringify(err));

    throw err;
  }
};

/**
 * PutObject
 * @param fileUri 文件URI
 */
const putObject = async (fileUri: string): Promise<void> => {
  console.info('in putObject');

  const fileInfo = await fs.open(fileUri, fs.OpenMode.READ_ONLY);
  const fileStat = await fs.stat(fileInfo.fd);
  let signUrlResult: ISignUrlResult;

  console.info('file name: ', fileInfo.name);

  try {
    // 獲取PutObject的簽名URL
    signUrlResult = await getSignUrl(fileInfo.name, {
      method: 'PUT',
      headers: {
        'Content-Length': fileStat.size
      },
      additionalHeaders: ['Content-Length']
    });
  } catch (e) {
    await fs.close(fileInfo.fd);

    throw e;
  }

  const data = new ArrayBuffer(fileStat.size);

  await fs.read(fileInfo.fd, data);
  await fs.close(fileInfo.fd);

  try {
    // 使用PutObject方法上傳文件
    await request(signUrlResult.url, {
      method: http.RequestMethod.PUT,
      header: {
        'Content-Length': fileStat.size,
        'Content-Type': signUrlResult.contentType
      },
      extraData: data
    }, 200);

    console.info('success putObject');
  } catch (err) {
    console.info('putObject request error: ' + JSON.stringify(err));

    throw err;
  }
};

export {
  getSignUrl,
  putObject
};

創(chuàng)建一個(gè)OSS Bucket，用于存儲(chǔ)Web應(yīng)用在瀏覽器環(huán)境中直接上傳的文件。

1. 登錄OSS管理控制臺(tái)。

2. 在左側(cè)導(dǎo)航欄，單擊Bucket 列表，然后單擊創(chuàng)建 Bucket。

3. 在創(chuàng)建 Bucket面板，選擇快捷創(chuàng)建，按如下說明配置各項(xiàng)參數(shù)。

   參數(shù)	示例值
   Bucket名稱	web-direct-upload
   地域	華東1（杭州）

4. 點(diǎn)擊完成創(chuàng)建。

操作一：創(chuàng)建ECS實(shí)例

請(qǐng)您進(jìn)入自定義購買頁面，并根據(jù)如下各模塊的內(nèi)容，創(chuàng)建或選擇購買ECS實(shí)例所需的基礎(chǔ)資源。

操作二：連接ECS實(shí)例

1. 在云服務(wù)器ECS控制臺(tái)的實(shí)例列表頁面，根據(jù)地域、實(shí)例ID找到創(chuàng)建好的ECS實(shí)例，單擊操作列下的遠(yuǎn)程連接。

2. 在遠(yuǎn)程連接對(duì)話框中，單擊通過Workbench遠(yuǎn)程連接對(duì)應(yīng)的立即登錄。

3. 在登錄實(shí)例對(duì)話框中，選擇認(rèn)證方式為SSH密鑰認(rèn)證，用戶名為root，輸入或上傳創(chuàng)建密鑰對(duì)時(shí)下載的私鑰文件，單擊確定，即可登錄ECS實(shí)例。

   說明

   私鑰文件在創(chuàng)建密鑰對(duì)時(shí)自動(dòng)下載到本地，請(qǐng)您關(guān)注瀏覽器的下載記錄，查找.pem格式的私鑰文件。

   

4. 顯示如下頁面后，即說明您已成功登錄ECS實(shí)例。

操作三：在訪問控制中創(chuàng)建RAM角色

1. 進(jìn)入RAM訪問控制的創(chuàng)建角色頁面。

2. 在創(chuàng)建角色頁面勾選阿里云服務(wù)，單擊下一步。

   

3. 勾選普通服務(wù)角色，填寫角色名稱如oss-web-upload。并選擇受信服務(wù)為云服務(wù)器后，單擊完成，即可完成創(chuàng)建。

   

4. 單擊復(fù)制，保存角色的ARN。

   

操作四：在訪問控制中創(chuàng)建上傳文件的權(quán)限策略

1. 在權(quán)限策略頁面，單擊創(chuàng)建權(quán)限策略。

2. 在創(chuàng)建權(quán)限策略頁面，單擊腳本編輯，將以下腳本中的<Bucket名稱>替換為準(zhǔn)備工作中創(chuàng)建的Bucket名稱web-direct-upload。

   {
     "Version": "1",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": "oss:PutObject",
         "Resource": "acs:oss:*:*:<Bucket名稱>/*"
       }
     ]
   }

3. 然后單擊確定，填寫策略名稱。

操作五：在訪問控制為RAM角色授予權(quán)限

1. 在角色頁面，找到目標(biāo)RAM角色，然后單擊RAM角色右側(cè)的新增授權(quán)。

2. 在新增授權(quán)頁面下的自定義策略頁簽，選擇已創(chuàng)建的自定義權(quán)限策略。

3. 單擊確定。

操作六：為ECS綁定RAM角色

1. 進(jìn)入云服務(wù)器ECS的實(shí)例頁面，在頁面上方選擇ECS實(shí)例所處地域，然后在實(shí)例頁面單擊目標(biāo)實(shí)例右側(cè)按鈕，單擊授予/收回RAM角色。

   

2. 在授予/收回RAM角色彈出框選擇目標(biāo)RAM角色，完成ECS綁定RAM角色。

   

操作一、ECS服務(wù)端配置依賴

請(qǐng)執(zhí)行以下命令安裝獲取臨時(shí)訪問憑證所需要的依賴項(xiàng)。

sudo pip install oss2
sudo pip install alibabacloud_credentials

<!-- https://mvnrepository.com/artifact/com.aliyun/credentials-java -->
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>credentials-java</artifactId>
    <version>0.3.4</version>
</dependency>

<dependency>
    <groupId>com.aliyun.kms</groupId>
    <artifactId>kms-transfer-client</artifactId>
    <version>0.1.0</version>
</dependency>

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.17.4</version>
</dependency>

操作二、在ECS服務(wù)端獲取臨時(shí)身份憑證

通過在業(yè)務(wù)服務(wù)器集成STS SDK，實(shí)現(xiàn)獲取臨時(shí)STS身份憑證，并將其返回給請(qǐng)求者。

from alibabacloud_credentials.client import Client as CredClient
from alibabacloud_credentials.models import Config as CredConfig

def main():
    # 配置ECSRAMRole作為訪問憑證。
    credentialConfig = CredConfig(
        type='ecs_ram_role',
        role_name='ecs_role_name'       # 請(qǐng)?zhí)顚慐CS扮演的角色名稱。
    )
    credentialsClient = CredClient(credentialConfig)
    credential = credentialsClient.get_credential()

    accesskeyid = credential.access_key_id            # 獲取accesskeyid。
    accesskeysecret = credential.access_key_secret    # 獲取accesskeysecret。
    security_token = credential.security_token        # 獲取security_token。

    print("stsToken:", security_token)
    print("accesskeyid:", accesskeyid)
    print("accesskeysecret:", accesskeysecret)

if __name__ == "__main__":
    main()

import com.aliyun.credentials.models.CredentialModel;
import com.aliyun.oss.common.auth.Credentials;
import com.aliyun.oss.common.auth.CredentialsProvider;
import com.aliyun.oss.common.auth.DefaultCredentials;
import com.aliyun.oss.common.utils.BinaryUtil;

public class vxDemo {
    public static void main(String[] args) {
    
        // 配置ECSRAMRole作為訪問憑證。
        com.aliyun.credentials.models.Config config = new com.aliyun.credentials.models.Config();
        config.setType("ecs_ram_role");
        config.setRoleName("ecs_role_name");   // 請(qǐng)?zhí)顚慐CS扮演的角色名稱。
        final com.aliyun.credentials.Client credentialsClient = new com.aliyun.credentials.Client(config);
        CredentialsProvider credentialsProvider = new CredentialsProvider() {
            @Override
            public void setCredentials(Credentials credentials) {
            }

            @Override
            public Credentials getCredentials() {
                CredentialModel credential = credentialsClient.getCredential();
                return new DefaultCredentials(credential.getAccessKeyId(), credential.getAccessKeySecret(), credential.getSecurityToken());
            }
        };
        String accessKeyId = credentialsProvider.getCredentials().getAccessKeyId();             //獲取accessKeyId。
        String secretAccessKey = credentialsProvider.getCredentials().getSecretAccessKey();     //獲取secretAccessKey。
        String securityToken = credentialsProvider.getCredentials().getSecurityToken();         //獲取securityToken。

        // 打印臨時(shí)訪問憑證信息。
        System.out.println("stsToken:" + securityToken);
        System.out.println("accessKeyId:" + accessKeyId);
        System.out.println("accesskeySecret:"+ secretAccessKey);
    }
}

客戶端向服務(wù)端發(fā)送一個(gè) POST 請(qǐng)求，包含文件名、HTTP 方法、請(qǐng)求頭、查詢參數(shù)等。服務(wù)端接收到請(qǐng)求后，通過OSS Client生成一個(gè)簽名URL，該URL允許用戶上傳文件到OSS。

app.post('/get_sign_url', async (req, res) => {
    const {
        fileName,
        method,
        headers = {},
        queries = {},
        additionalHeaders = []
    } = req.body; // 從body中解析出數(shù)據(jù)
    const client = new OSS({
        region: 'yourRegion',
        // 填入步驟二中返回的臨時(shí)訪問憑證accessKeyId、accessKeySecret、stsToken
        accessKeyId: 'yourstsAccessKey',
        accessKeySecret: 'yourstsAccessKeySecret',
        stsToken: 'yourSTSToken',
        bucket: 'yourBucket',
        authorizationV4: true
    });

    const reqHeaders = {
        ...headers
    };

    // 處理一下content-type
    if (fileName && method === 'PUT') {
        const fileNameSplit = fileName.split('.');

        reqHeaders['content-type'] = mime.getType(fileNameSplit.length > 1 ? fileNameSplit[fileNameSplit.length-1] : '');
    }

    // 生成V4簽名URL
    const url = await client.signatureUrlV4(method, 300, {
        headers: reqHeaders,
        queries
    }, fileName, additionalHeaders);

    res.json({
        url,
        contentType: reqHeaders['content-type']
    });
});

使用 @kit.NetworkKit 庫的 http 模塊來發(fā)送 HTTP 請(qǐng)求的異步函數(shù) request。

import { http } from '@kit.NetworkKit';

const request = async (url: string, options: http.HttpRequestOptions, successCode: number[] | number) => {
  const httpRequest = http.createHttp();

  try {
    const httpResponse = await httpRequest.request(url, {
      ...options,
      priority: 1,
      connectTimeout: 60000,
      readTimeout: 60000,
      usingProtocol: http.HttpProtocol.HTTP1_1
    });

    if ((Array.isArray(successCode) && successCode.includes(httpResponse.responseCode)) || httpResponse.responseCode === successCode) {
      const requestID = httpResponse.header['x-oss-request-id'];

      console.info(`request success${requestID ? ', oss request ID: ' + requestID : ''}`);

      return httpResponse;
    } else {
      throw {
        code: httpResponse.responseCode,
        result: httpResponse.result.toString(),
        requestID: httpResponse.header['x-oss-request-id']
      };
    }
  } catch (err) {
    console.info('request error: ' + JSON.stringify(err));

    throw err;
  } finally {
    httpRequest.destroy();
  }
};

export {
  request
};

import { common } from '@kit.AbilityKit';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import picker from '@ohos.file.picker';

// 選擇文件
const fileSelect = async (context: common.Context) => {
  const documentSelectOptions = new picker.DocumentSelectOptions();
  const documentViewPicker = new picker.DocumentViewPicker(context);

  documentSelectOptions.maxSelectNumber = 5;


  const documentSelectResult = await documentViewPicker.select(documentSelectOptions);

  return documentSelectResult;
};

export {
  fileSelect
};

客戶端發(fā)起請(qǐng)求到服務(wù)器請(qǐng)求生成簽名 URL。請(qǐng)求體包含了文件名、請(qǐng)求方法、頭部信息等。成功響應(yīng)后，返回簽名 URL 和 Content-Type。如果請(qǐng)求失敗，捕獲并拋出錯(cuò)誤。

const getSignUrl = async (fileName: string, req: {
  method: 'GET' | 'POST' | 'PUT';
  headers?: Record<string, string | number>;
  queries?: Record<string, string>;
  additionalHeaders?: string[];
}): Promise<ISignUrlResult> => {
  console.info('in getSignUrl');

  try {
    const response = await request(serverUrl, {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      extraData: {
        fileName,
        method: req.method,
        headers: req.headers,
        queries: req.queries,
        additionalHeaders: req.additionalHeaders
      },
      expectDataType: http.HttpDataType.OBJECT
    }, 200);
    const result = response.result as ISignUrlResult;

    console.info('success getSignUrl');

    return result;
  } catch (err) {
    console.info('getSignUrl request error: ' + JSON.stringify(err));

    throw err;
  }
};

獲取在服務(wù)端生成的簽名URL，然后使用PutObject的方法上傳文件。

const putObject = async (fileUri: string): Promise<void> => {
  console.info('in putObject');

  const fileInfo = await fs.open(fileUri, fs.OpenMode.READ_ONLY);
  const fileStat = await fs.stat(fileInfo.fd);
  let signUrlResult: ISignUrlResult;

  console.info('file name: ', fileInfo.name);

  try {
    // 獲取PutObject的簽名URL
    signUrlResult = await getSignUrl(fileInfo.name, {
      method: 'PUT',
      headers: {
        'Content-Length': fileStat.size
      },
      additionalHeaders: ['Content-Length']
    });
  } catch (e) {
    await fs.close(fileInfo.fd);

    throw e;
  }

  const data = new ArrayBuffer(fileStat.size);

  await fs.read(fileInfo.fd, data);
  await fs.close(fileInfo.fd);

  try {
    // 使用PutObject方法上傳文件
    await request(signUrlResult.url, {
      method: http.RequestMethod.PUT,
      header: {
        'Content-Length': fileStat.size,
        'Content-Type': signUrlResult.contentType
      },
      extraData: data
    }, 200);

    console.info('success putObject');
  } catch (err) {
    console.info('putObject request error: ' + JSON.stringify(err));

    throw err;
  }
};