鸿蒙Next通过oss上传照片到阿里云

前言

最近在写纯血鸿蒙的APP，需要用到oss上传照片，之前的客户端 Android 和 IOS 都已经实现了，获取的阿里云签名的上传地址是服务端实现的，相信大部分公司都是这样的模式，服务端也是调用阿里云的SDK来实现的，这里就不说了。

一、获取阿里云的上传地址的服务端响应大致如下：

{
	"objectKey": "xxx/2024/12-04/caseNo/xxx/10011111/IMG_20241204_171414.jpg",
	"uploadUrl": "https://xxx-1-pub.aliyuncs.com/xxx/2024/12-04/caseNo/xxx/10011111/IMG_20241204_171414.jpg?Expires=1733307259&OSSAccessKeyId=STS.NTvjqsqXKGNY4ym8mAC91BwGF&Signature=XyDlgeRiI81m5zY%2B2etXnL3iNrs%3D&security-token=CAIS5wJ1q6Ft5B2yfSjIr5fDIcvHnIdq8IyyNl%2Fc3G0UT7YdrbLspDz2IHtIfnRvBu0ev%2FsymGxX7%2F0flrBzWpVfRECBatBrq51M6h6kbs%2Fatteu7LsC0AN41olCUUyV5tTbRsmkZvG%2FE67fRjKpvyt3xqSABlfGdle5MJqPpId6Z9AMJGeRZiZHA9EkTWkL6rVtVx3rOO2qLwThj0fJEUNsoXAcs25k7rmlycDugXi3zn%2BCk7JN%2Fdmgfcj8Mpc3ZM8lCO3YhrImKvDztwdL8AVP%2BatMi6hJxCzKpNn1ASMKuEncbrWLr4U%2Bc1IlOvdjQPNe3P%2Fnjrh5vPfalo%2BywBJEPOQQTynEWMW639trtExC822EH1ySBwMusrjnXvGd22uv8WyQKJBsMJOYpivFg%2FiAnq0%2BhosSJPQeztMvd52ukcBQn9M8hD7z1oHRHHvsOP7yml1TAcQXAi1lSVh4lAKOfMevW5FgWzsPbxqAAZwDDN9%2BownbWgV%2FetOALAtly8mOLpti8yvYyThOR3f6N1r0PxqiTzlGTH5Mb4GcdmVfMwD842jfknDKHfnvPAYO5mmb7jcpP8wu5IAQ3UUJtAiwAvbVZENIO%2FHsUFFb2%2B1aWcIpT%2FePBemTkJT6rxq25sSZpF8Lg6tzWAK0bKbGIAA%3D",
	"contentType": "image/jpeg",
	"thumbnailUrl": "https://xxx-1-pub.aliyuncs.com/xxx/2024/12-04/caseNo/xxx/10011111/IMG_20241204_171414.jpg?Expires=1733307259&OSSAccessKeyId=STS.NTvjqsqXKGNY4ym8mAC91BwGF&Signature=cF3rM8JCtNMt8VbsLx6YICWp4fw%3D&x-oss-process=image%2Fresize%2Cm_lfit%2Cw_200%2Ch_200&security-token=CAIS5wJ1q6Ft5B2yfSjIr5fDIcvHnIdq8IyyNl%2Fc3G0UT7YdrbLspDz2IHtIfnRvBu0ev%2FsymGxX7%2F0flrBzWpVfRECBatBrq51M6h6kbs%2Fatteu7LsC0AN41olCUUyV5tTbRsmkZvG%2FE67fRjKpvyt3xqSABlfGdle5MJqPpId6Z9AMJGeRZiZHA9EkTWkL6rVtVx3rOO2qLwThj0fJEUNsoXAcs25k7rmlycDugXi3zn%2BCk7JN%2Fdmgfcj8Mpc3ZM8lCO3YhrImKvDztwdL8AVP%2BatMi6hJxCzKpNn1ASMKuEncbrWLr4U%2Bc1IlOvdjQPNe3P%2Fnjrh5vPfalo%2BywBJEPOQQTynEWMW639trtExC822EH1ySBwMusrjnXvGd22uv8WyQKJBsMJOYpivFg%2FiAnq0%2BhosSJPQeztMvd52ukcBQn9M8hD7z1oHRHHvsOP7yml1TAcQXAi1lSVh4lAKOfMevW5FgWzsPbxqAAZwDDN9%2BownbWgV%2FetOALAtly8mOLpti8yvYyThOR3f6N1r0PxqiTzlGTH5Mb4GcdmVfMwD842jfknDKHfnvPAYO5mmb7jcpP8wu5IAQ3UUJtAiwAvbVZENIO%2FHsUFFb2%2B1aWcIpT%2FePBemTkJT6rxq25sSZpF8Lg6tzWAK0bKbGIAA%3D",
	"url": "https://xxx-1-pub.aliyuncs.com/xxx/2024/12-04/caseNo/xxx/10011111/IMG_20241204_171414.jpg?Expires=1733307259&OSSAccessKeyId=STS.NUVyiVTpfT7enQBVV7UQpYydV&Signature=Mt6wUa0uwjuhhDoIDIsr0uObj3A%3D&security-token=CAIS5wJ1q6Ft5B2yfSjIr5bjMtPiua9H4%2FWObHfzslZiWd5ctrzPtDz2IHtIfnRvBu0ev%2FsymGxX7%2F0flrBzWpVfRECBatBrq51M6h6kbs%2Fatteu7LsC0Fl71olCUUyV5tTbRsmkZvG%2FE67fRjKpvyt3xqSABlfGdle5MJqPpId6Z9AMJGeRZiZHA9EkTWkL6rVtVx3rOO2qLwThj0fJEUNsoXAcs25k7rmlycDugXi3zn%2BCk7JN%2Fdmgfcj8Mpc3ZM8lCO3YhrImKvDztwdL8AVP%2BatMi6hJxCzKpNn1ASMKuEncbrWLr4U%2Bc1IlOvdjQPNe3P%2Fnjrh5vPfalo%2BywBJEPOQQTynEWMW639trtExC822EH1ySBwMusrjnXvGd22uvUWmAKJBsMJOYpivFg%2FiAnq0%2BhosSJPQeztMvd52ukcBQn9M8hD7z1oHRHHvsOP7yml1TAcQXAi1lSVh4lAKOfMdfdAO5WzsPbxqAATEdgxuax5jo%2FDZkRlgt0DahCkPvHCP4Em3sr21bZB%2BEVk%2FSjqQ2j0Bm9ClNc5f5%2FFOdMsKFbzcR%2B71dcsKiPxE8zf8VmsDpENQZ7EK2CLfCm2UKrIoT9mhnEBPYkKe40Qe%2FgooE8fem4Nd%2FgNspYYVDJp7svZvC98Blkn3tJONhIAA%3D",
	"maxSize": 2048
}

上面我们服务端是封装过的，其中 uploadUrl 就是获取的上传oss需要的 url，contentType也是上传附件需要的参数。url 是上传后可以直接显示图片的 url。

二、使用服务端返回的oss上传附件的对象进行文件上传

 async putToOssServer(ossUrl: string, contentType: string, imageUrl: string) {
    const fileInfo = await fs.open(this.imgPath, fs.OpenMode.READ_ONLY);
    const fileStat = await fs.stat(fileInfo.fd);

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

    const data = new ArrayBuffer(fileStat.size);

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

    try {
      // 使用PutObject方法上传文件
      const httpRequest = http.createHttp()
      httpRequest.request(ossUrl, {
        method: http.RequestMethod.PUT,
        header: {
          'Content-Length': fileStat.size,
          'Content-Type': contentType
        },
        extraData: data,
        connectTimeout: 10000,
        readTimeout: 10000
      }, (error: Error, response: http.HttpResponse) => {
        // error 为空，表明接口调用成功
        if (!error) {
          console.log("接口请求成功：ossImgUrl = " + imageUrl+", response：" + `${response.result}`)
          this.ossImgUrl = imageUrl
        } else {
          console.log("接口请求失败：url = " + ossUrl+", 错误信息：" + `${JSON.stringify(error)}`)
        }
        // 销毁请求
        httpRequest.destroy()
      })
      console.info('success putObject');
    } catch (err) {
      console.info('putObject request error: ' + JSON.stringify(err));
      // throw err;
    }
  }

通过上面的方法就可以实现 oss 文件上传了。
使用PutObject方法上传文件，url 对应的是上面的 uploadUrl，contentType 也是上面服务端返回的 ，
imageUrl 对应的是 服务端返回的字段 url 。

遇到的坑：

1. contentType 我直接写死的 application/json，应该是用服务端返回的 contentType。
2. 显示照片我也用的是 uploadUrl导致，报如下的错误：

SignatureDoesNotMatch: The request signature we calculated does not match the signature you provided. Check your key and signing method

应该是使用服务端返回的字段 url 。

好了，最后就大功告成了。