Web前端直接调用

交互流程

前提条件

获取STS临时凭证：

1. 授予权限：

   在获取STS临时凭证之前，调用者（RAM用户和RAM角色）需要被授权有调用STS接口的权限。您可以通过设置RAM权限策略来实现这一点。相关的设置步骤和权限策略可参见使用STS临时访问凭证访问OSS文档。您需要根据实际需求配置更细粒度的授权策略，防止出现权限过大的风险。关于更细粒度的授权策略配置详情，请参见视觉智能开放平台自定义权限策略参考。

   重要

   为后续步骤进行，调用者（RAM用户和RAM角色）需要被授权AliyunSTSAssumeRoleAccess（调用STS服务AssumeRole接口的权限）、AliyunVIAPIFullAccess（这里为了下列实例，给出的是管理视觉智能API的权限，但是在实际工作中，强烈建议您根据实际需求配置更细粒度的授权策略，防止出现权限过大的风险。关于更细粒度的授权策略配置详情，请参见视觉智能开放平台自定义权限策略参考）。

2. 调用AssumeRole接口：

   使用已授权的RAM用户或RAM角色调用AssumeRole接口，并按照接口文档填写必要参数。查阅AssumeRole接口的官方文档以了解详细的接口说明和使用方法。

3. 使用STS Token：

   调用AssumeRole接口成功后，您会收到一个包含AccessKeyId、AccessKeySecret和SecurityToken的STS Token（如下代码）。在实际调用其他阿里云服务的接口时，您需要将代码中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>替换为阿里云STS Token数据中获取的临时AccessKeyId、AccessKeySecret、SecurityToken。

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

步骤一：配置基本参数

下面提供的代码段是调用阿里云的“银行卡识别”服务，在WebDemo的js/script.js文件中。

1. 准备API调用的参数：

   • AccessKeyId、AccessKeySecret、SecurityToken：首先，你需要替换<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>这三个变量为你通过用前提条件中获取的STS Token的临时访问密钥和安全令牌。

   • Endpoint：API的访问域名，这里为ocr.cn-shanghai.aliyuncs.com。

   • Action：API操作名称，这里为RecognizeBankCard，表示调用的是银行卡识别服务。

   • API Version：API版本，这里为2019-12-30。

   • 特别注意要授予权限给RAM用户或角色，以确保有权限调用视觉智能开放平台的API。请参见前提条件中的授予权限。

2. 构造请求参数对象：

   request_对象包含了API调用所需的系统参数（如签名方法、时间戳、格式等）和业务参数（这里是待识别的银行卡图片URLImageURL）。

3. 发起API请求：

   通过调用封装好的callApiRequest函数，将准备好的请求参数、HTTP请求方法、API endpoint、STS Token的AccessKeySecret以及一个回调函数传递进去。回调函数用于处理API响应。

举例来说，如果您希望使用通用分割能力，通过通用分割API文档得知该能力属于分割抠图类目（imageseg20191230），能力名称为SegmentCommonImage。此时，您需要将endpoint改为imageseg.cn-shanghai.aliyuncs.com，Action改为SegmentCommonImage，API_VERSION保持为2019-12-30不需要修改，request_["ImageURL"]参数名保持为ImageURL不需要修改。在获取结果的时候，需要注意获取的是ImageURL，其含义不是银行卡号，而是分割后的图片地址。

/**
 * ========================================================================================================================
 * 以RecognizeBankCard为例。
 * 代码中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>需替换为阿里云STS Token数据中获取的临时AccessKeyId、AccessKeySecret、SecurityToken
 * 请求银行卡识别：https://help.aliyun.com/document_detail/151893.html
 * ========================================================================================================================
 */
function callRecognizeBankCard(callback) {
  /**
    <ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>需替换为STS Token数据中获取的临时AccessKeyId、AccessKeySecret、SecurityToken
    需要为RAM用户和RAM角色授予权限AliyunVIAPIFullAccess，请参考https://help.aliyun.com/document_detail/145025.html
   */
  //AccessKeyID
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";


  // 这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action，能力名称，请参考具体算法文档详情页中的Action参数，这里以银行卡识别为例：https://help.aliyun.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // API_HTTP_METHOD推荐使用POST
  const API_HTTP_METHOD = "POST";
  // API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
  const API_VERSION = "2019-12-30";

  const request_ = {};
  //系统参数
  request_["SignatureMethod"] = "HMAC-SHA1";
  request_["SignatureNonce"] = signNRandom();
  request_["AccessKeyId"] = accessKeyId;
  request_["SignatureVersion"] = "1.0";
  request_["Timestamp"] = getTimestamp();
  request_["Format"] = "JSON";
  request_["RegionId"] = "cn-shanghai";
  request_["Version"] = API_VERSION;
  request_["Action"] = Action;
  request_["SecurityToken"] = securityToken;

  // 业务参数，请参考具体的AI能力的API文档进行修改
  request_["ImageURL"] = "http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/ocr/RecognizeBankCard/yhk3.jpg";
  
  callApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

步骤二：调用服务端接口并计算签名

下面提供的代码段是针对视觉智能开放平台API的签名和请求发送过程的实现。签名是云服务常用的一种安全措施，用于确保发送到云服务的请求是未经篡改的，并且是由拥有相应凭证的合法用户发起的。具体逻辑文档请参见文档请求签名。

以下是该代码段的具体含义和步骤：

签名步骤：

1. 生成随机数字（Nonce）：函数signNRandom生成一个随机数，这是为了使得每个请求都是唯一的，以防止重放攻击。

2. 获取时间戳：函数getTimestamp生成符合ISO 8601标准的时间戳，表示请求发送的时间。

3. 参数排序：函数ksort按照字典序排序所有请求参数。这是因为签名算法要求参数必须以确定的顺序进行排列。

4. 计算签名：函数createHmac和getSignature结合使用，用提供的Access Key Secret和以上生成的规范请求字符串，采用HMAC-SHA1算法计算出请求的签名。

5. 构建请求URL：函数generateUrl构建完整的请求URL，包括所有排序后的请求参数和计算得到的签名。

发送请求步骤：

1. 发送请求：函数callApiRequest使用上述构建的URL通过http.post函数发送一个HTTP POST请求。

2. 处理响应：当服务器响应请求后，回调函数会被调用，并处理返回的结果，如将响应的JSON文本转换成对象。

/**
 * ========================================================================================================================
 * 以下代码仅仅为了调用服务端接口计算签名，其逻辑可参考文档：https://help.aliyun.com/document_detail/144904.html
 * ========================================================================================================================
 */

//SignatureNonce随机数字
function signNRandom() {
  const Rand = Math.random()
  const mineId = Math.round(Rand * 100000000000000)
  return mineId;
};
//Timestamp
function getTimestamp() {
  let date = new Date();
  let YYYY = pad2(date.getUTCFullYear());
  let MM = pad2(date.getUTCMonth() + 1);
  let DD = pad2(date.getUTCDate());
  let HH = pad2(date.getUTCHours());
  let mm = pad2(date.getUTCMinutes());
  let ss = pad2(date.getUTCSeconds());
  return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
};
//补位占位
function pad2(num) {
  if (num < 10) {
    return '0' + num;
  }
  return '' + num;
};
// 排序
function ksort(params) {
  let keys = Object.keys(params).sort();
  let newParams = {};
  keys.forEach((key) => {
    newParams[key] = params[key];
  });
  return newParams;
};
// HmacSHA1加密+base64
function createHmac(stringToSign, key) {
  const CrypStringToSign = CryptoJS.HmacSHA1(stringToSign, key);
  const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
  return base64;
};
//编码
function encode(str) {
  var result = encodeURIComponent(str);
  return result.replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
    .replace(/\*/g, '%2A');
};
function sha1(stringToSign, key) {
  return createHmac(stringToSign, key);
};
function getSignature(signedParams, method, secret) {
  var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
  const key = secret + "&";
  return sha1(stringToSign, key);
};
//参数拼接 &
function objToParam(param) {
  if (Object.prototype.toString.call(param) !== '[object Object]') {
    return '';
  }
  let queryParam = '';
  for (let key in param) {
    if (param.hasOwnProperty(key)) {
      let value = param[key];
      queryParam += toQueryPair(key, value);
    }
  }
  return queryParam;
};
function toQueryPair(key, value) {
  if (typeof value == 'undefined') {
    return `&${key}=`;
  }
  return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
};
function generateUrl(request, httpMethod, endpoint, accessKeySecret) {
  //参数中key排序
  const sortParams = ksort(request);
  //拼成参数
  const sortQueryStringTmp = objToParam(sortParams);
  const sortedQueryString = sortQueryStringTmp.substring(1);// 去除第一个多余的&符号
  //构造待签名的字符串
  const Signature = getSignature(sortedQueryString, httpMethod, accessKeySecret)
  //签名最后也要做特殊URL编码
  request["Signature"] = encodeURIComponent(Signature);

  //最终生成出合法请求的URL
  const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signature) + sortQueryStringTmp;
  return finalUrl;
}

步骤三：封装请求并发送数据至指定视觉智能开放平台API

下面提供的代码段是在Web前端环境中用于封装HTTP请求和发送数据到指定API的示例实现。提供了在Web前端调用API的封装方法，通过定义请求参数和设置回调方式来简化异步HTTP请求的处理。它提供了基本的错误处理（如超时）和简化了通过POST方法发送JSON数据的过程。

以下是该代码段的具体含义和步骤：

1. 构建HTTP库：创建一个包含所有HTTP请求方法的http对象。

2. 实现基本请求方法：通过http.request函数，使用XMLHttpRequest来实现对基本HTTP请求的支持。

3. 封装特定类型请求：提供http.post方法，简化使用JSON格式发送POST请求的过程。

4. 发起请求并处理结果：通过callApiRequest函数，展示如何使用封装的HTTP库发送请求并处理响应。

/**
 * ========================================================================================================================
 * 封装http请求
 * ========================================================================================================================
 */
var http = {};
http.request = function (option, callback) {
  var url = option.url;
  var method = option.method;
  var data = option.data;
  var timeout = option.timeout || 0;
  //创建XMLhttpRequest对象
  var xhr = new XMLHttpRequest();
  (timeout > 0) && (xhr.timeout = timeout);
  //使用open方法设置和服务器的交互信息
  xhr.open(method, url, true);
  if (typeof data === 'object') {
    try {
      data = JSON.stringify(data);
    } catch (e) { }
  }
  //发送请求
  xhr.send(data);
  //如果请求完成，并响应完成，获取到响应数据
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var result = xhr.responseText;
      try { result = JSON.parse(xhr.responseText); } catch (e) { }
      callback && callback(null, result);
    }
  }.bind(this);
  //延时处理
  xhr.ontimeout = function () {
    callback && callback('timeout');
    console.log('error', '连接超时');
  };
};
// post请求
http.post = function (option, callback) {
  option.method = 'post';
  option.contentType = 'application/json;charset=UTF-8'
  this.request(option, callback);
};
//请求数据
callApiRequest = (request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) => {
  const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
  http.post({ url: url, timeout: 5000 }, function (err, result) {
    // 获取结果
    console.log(result);
    callback && callback(result);
  });
}

步骤四：页面触发按钮并调用视觉智能开放平台API

页面触发按钮，调用API（银行卡识别功能）。以下是该代码段的具体含义和步骤：

1. 用户点击按钮：触发callRecognizeBankCard函数。

2. 执行银行卡识别操作：通过callRecognizeBankCard函数向后端发送请求，进行银行卡信息的识别。

3. 处理识别结果：

   • 错误处理：根据错误码（Code）显示不同的错误信息。

   • 成功处理：在成功识别出银行卡信息后，显示银行卡号（CardNumber）。

  <button onclick="callRecognizeBankCard(function(result) {
    if(result.Code) {
      // 进行错误处理
      if (result.Code == 'InvalidAccessKeyId.NotFound') {
          window.alert('请求报错，请检查您代码中的YOUR_ACCESS_KEY_ID和YOUR_ACCESS_KEY_SECRET是否已经修改正确。');
      } else if(result.Code == 'InvalidApi.NotPurchase') {
          window.alert('请求报错，您的账号未开通视觉智能开放平台相应类目，请进行开通：https://help.aliyun.com/document_detail/465341.html');
      } else if(result.Code == 'Unauthorized') {
          window.alert('请求报错，您的子账号未授予AliyunVIAPIFullAccess权限，请参考https://help.aliyun.com/document_detail/145025.html');
      } else if(result.Code == 'InvalidAction.NotFound') {
          window.alert('请求报错，请检查您调用的API和类目是否匹配，API和类目的关系请参考：https://help.aliyun.com/document_detail/465341.html，和访问的域名是否匹配，类目和域名的关系请参考：https://help.aliyun.com/document_detail/143103.html');
      } else {
          window.alert(result.Message);
      }
    } else {
      console.log(result.Data);
      // 获取银行卡号，这里只是示例，请根据文档获取自己想要的出参
      window.alert('银行卡号：' + result.Data.CardNumber);
    }
  })">开始调用</button>

交互流程

前提条件

获取STS临时凭证：

1. 授予权限：

   在获取STS临时凭证之前，调用者（RAM用户和RAM角色）需要被授权有调用STS接口的权限。您可以通过设置RAM权限策略来实现这一点。相关的设置步骤可参见使用STS临时访问凭证访问OSS文档。您需要根据实际需求配置更细粒度的授权策略，防止出现权限过大的风险。关于更细粒度的授权策略配置详情，请参见视觉智能开放平台自定义权限策略参考。

   重要

   为后续步骤进行，调用者（RAM用户和RAM角色）需要被授权AliyunSTSAssumeRoleAccess（调用STS服务AssumeRole接口的权限）、RAM角色授予上传OSS文件的权限、AliyunVIAPIFullAccess（这里为了下列实例，给出的是管理视觉智能API的权限，您需要根据实际需求配置更细粒度的授权策略，防止出现权限过大的风险。关于更细粒度的授权策略配置详情，请参见视觉智能开放平台自定义权限策略参考）

2. 调用AssumeRole接口：

   使用已授权的RAM用户或RAM角色调用AssumeRole接口，并按照接口文档填写必要参数。查阅AssumeRole接口的官方文档以了解详细的接口说明和使用方法。

3. 使用STS Token：

   调用AssumeRole接口成功后，您会收到一个包含AccessKeyId、AccessKeySecret和SecurityToken的STS Token（如下代码）。在实际调用其他阿里云服务的接口时，您需要将代码中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>替换为阿里云STS Token数据中获取的临时AccessKeyId、AccessKeySecret、SecurityToken。

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

步骤一：配置基本参数

下面提供的代码段是调用阿里云的"银行卡识别"服务，在WebDemo的js/script.js文件中。需要将代码中的<ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>替换为阿里云STS Token数据中获取的临时AccessKeyId、AccessKeySecret、SecurityToken。

/**
 * 如何获取阿里云STS，请参考https://help.aliyun.com/zh/oss/developer-reference/use-temporary-access-credentials-provided-by-sts-to-access-oss
 * <ALIBABA_CLOUD_ACCESS_KEY_ID>、<ALIBABA_CLOUD_ACCESS_KEY_SECRET>、<ALIBABA_CLOUD_SECURITY_TOKEN>需替换为阿里云STS Token数据中获取的临时AccessKeyId、AccessKeySecret、SecurityToken
 * 需要为RAM用户和RAM角色授予权限AliyunVIAPIFullAccess，请参考https://help.aliyun.com/document_detail/145025.html
 */

  //AccessKeyID
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";

步骤二：调用GetOssStsToken接口获取临时OSS STS Token

下面提供的代码段中getOssStsToken 函数用于获取OSS（Object Storage Service，对象存储服务）的STS（Security Token Service，安全令牌服务）令牌。它用于向阿里云请求临时访问权限以便上传文件到OSS。上传的文件会在OSS bucket中保存1天。通过指定的endpoint（API访问域名），Action（请求执行的操作名称），和API_VERSION（API版本）来构造请求，然后通过回调函数callback返回结果。callApi 函数用于调用阿里云平台的任意API，支持通过签名进行请求认证。函数接收endpoint（API访问域名），action（API操作名称），version（API版本），可选的业务参数params以及回调函数callback。函数中构造了一个符合要求的请求对象request_，包括系统参数（如签名方法、时间戳、访问密钥ID等）和业务参数。signNRandom函数（未提供实现）生成一个唯一的随机值（SignatureNonce）用于签名防重放，getTimestamp函数（未提供实现）则提供当前时间戳。最后，该函数通过调用callApiRequest（未提供实现）函数实现实际的API调用并通过callback返回结果。

/**
 * ========================================================================================================================
 * 获取oss sts token，使用阿里云视觉智能开放平台官方OSS-Bucket作为临时存储，仅为方便用户方便调试接口使用，文件存储有效期为1天。
 * ossStsToken获取原理：请参见文档https://help.aliyun.com/document_detail/155645.html，方式二中的其他语言
 * ========================================================================================================================
 */
function getOssStsToken(callback) {
  
  // 这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
  const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
  // API Action，能力名称，请参考具体算法文档详情页中的Action参数，这里以银行卡识别为例：https://help.aliyun.com/document_detail/151893.html
  const Action = "GetOssStsToken";
  // API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
  const API_VERSION = "2020-04-01";

  callApi(endpoint, Action, API_VERSION, null, callback);
}

/**
 * ========================================================================================================================
 * 通过签名方式调用API，支持平台的任意API。
 * 签名文档：https://help.aliyun.com/document_detail/144904.html
 * ========================================================================================================================
 */
function callApi(endpoint, action, version, params, callback) {

  const API_HTTP_METHOD = "POST";

  const request_ = {};
  //系统参数
  request_["SignatureMethod"] = "HMAC-SHA1";
  request_["SignatureNonce"] = signNRandom();
  request_["AccessKeyId"] = accessKeyId;
  request_["SignatureVersion"] = "1.0";
  request_["Timestamp"] = getTimestamp();
  request_["Format"] = "JSON";
  request_["RegionId"] = "cn-shanghai";
  request_["Version"] = version;
  request_["Action"] = action;
  request_["SecurityToken"] = securityToken;
  // 业务参数，请参考具体的AI能力的API文档进行修改
  if(params) {
    for(let key in params) {
      request_[key] = params[key];
    }
  }

  callApiRequest(request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

步骤三：使用临时OSS STS Token将文件上传到阿里云视觉智能开放平台官方OSS Bucket

下面提供的代码段是将文件或URL资源上传到阿里云Object Storage Service（OSS）的JavaScript实现，尤其是上传到视觉智能开放平台官方的临时存储Bucket中。上传的文件有效期为1天，这便于用户进行接口调试。

以下是该代码段的具体含义和步骤：

1. 初始化OSS客户端：使用STS令牌初始化OSS客户端，并指定OSS的区域和Bucket。

2. 生成文件路径：使用getNonce函数生成一个随机字符串作为文件名的一部分，确保上传路径的唯一性。

3. 上传文件：使用OSS客户端的put方法，将本地文件或从URL转换得到的File对象上传到OSS。

   说明

   • OSS Bucket上传文件的路径是accessKeyId/getNonce(6)/fileName。

   • 文件路径中的accessKeyId是步骤一：配置基本参数中获取的<ALIBABA_CLOUD_ACCESS_KEY_ID>。

4. 处理响应：在上传完成后，通过回调函数返回上传结果。这通常包括新上传的文件URL，如果上传过程中出现异常，则打印错误信息。

/**
 * ========================================================================================================================
 * 处理文件和URL，将其上传到阿里云视觉智能开放平台官方OSS-Bucket作为临时存储，该方式仅为方便用户方便调试接口使用，文件存储有效期为1天。
 * ========================================================================================================================
 */
// 使用oss-client-sdk进行文件上传
function uploadToTempOss(ossStsToken, filePath, callback) {
  let ossClient = new OSS({
    accessKeyId: ossStsToken.Data.AccessKeyId,
    accessKeySecret: ossStsToken.Data.AccessKeySecret,
    stsToken: ossStsToken.Data.SecurityToken,
    // region固定为oss-cn-shanghai
    region: "oss-cn-shanghai",
    // bucket固定为viapi-customer-temp
    bucket: 'viapi-customer-temp',
  });
  let ins = filePath;
  let fileName = filePath.name;
  // 上传之后的文件路径，必须是${accessKeyId}/xxx，accessKeyId是步骤一中获取的<ALIBABA_CLOUD_ACCESS_KEY_ID>
  let objectName = `${accessKeyId}/${getNonce(6)}/${fileName}`;
  putObject(ins);
  async function putObject(data) {
    try {
      // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
      // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
      // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
      const result = await ossClient.put(
        objectName,
        data
      );
      console.log('result', result);
      callback && callback(result.url);
    } catch (e) {
      console.log(e);
    }
  }
}
//随机uuid，ossClient上传后的文件命名拼接
function getNonce(length) {
  var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var result = '';
  for (var i = length; i > 0; --i)
    result += str[Math.floor(Math.random() * str.length)];
  return result;
}
// 任意链接转化为File，链接必须支持跨域，为了将链接内容传到阿里云视觉智能开放平台官方OSS-Bucket
function getImageFileFromUrl(url, imageName) {
  return new Promise((resolve, reject) => {
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = () => {
      blob = xhr.response;
      let imgFile = new File([blob], imageName);
      resolve(imgFile);
    };
    xhr.onerror = (e) => {
      reject(e)
    };
    xhr.send();
  });
}

步骤四：上传之后得到OSS的URL地址，调用视觉智能开放平台API

下面提供的代码段是用上传之后得到OSS的URL地址，调用视觉智能开放平台API。具体的操作步骤与若文件在上海地域OSS进行调用一致。且每一步代码都已封装好，完整的示例代码可下载WebDemo。

1. 准备API调用的参数：

   • Endpoint：API的访问域名，这里为ocr.cn-shanghai.aliyuncs.com。

   • Action：API操作名称，这里为RecognizeBankCard，表示调用的是银行卡识别服务。

   • API Version：API版本，这里为2019-12-30。

   • 特别注意要授予权限给RAM用户或角色，以确保有权限调用视觉智能开放平台的API。请参见前提条件中的授予权限。

2. 构造请求参数对象：

   request_对象包含了API调用所需的系统参数（如签名方法、时间戳、格式等）和业务参数（这里是待识别的银行卡图片URLImageURL）。

3. 发起API请求：

   通过调用封装好的callApi函数，将准备好的请求参数、API endpoint、以及一个回调函数传递进去。回调函数用于处理API响应。

在WebDemo的js/script.js文件中，callRecognizeBankCard函数的endpoint、Action、API_VERSION参数及request_["ImageURL"]这一行代表业务参数。举例来说，如果您希望使用通用分割能力，通过通用分割API文档得知该能力属于分割抠图类目（imageseg20191230），能力名称为SegmentCommonImage。此时，您需要将endpoint改为imageseg.cn-shanghai.aliyuncs.com，Action改为SegmentCommonImage，API_VERSION保持为2019-12-30不需要修改，request_["ImageURL"]参数名保持为ImageURL不需要修改。在获取结果的时候，需要注意获取的是ImageURL，其含义不是银行卡号，而是分割后的图片地址。

/**
 * ========================================================================================================================
 * 以RecognizeBankCard为例。
 * 请求银行卡识别：https://help.aliyun.com/document_detail/151893.html
 * ========================================================================================================================
 */
function callRecognizeBankCard(imageUrl, callback) {
  // 这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action，能力名称，请参考具体算法文档详情页中的Action参数，这里以银行卡识别为例：https://help.aliyun.com/document_detail/151893.html
  const Action = "RecognizeBankCard";
  // API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
  const API_VERSION = "2019-12-30";

  const params = {};
  // 业务参数，请参考具体的AI能力的API文档进行修改
  params["ImageURL"] = imageUrl;

  callApi(endpoint, Action, API_VERSION, params, callback);
}