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

前言

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

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

java 复制代码
{
	"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需要的 urlcontentType也是上传附件需要的参数。url 是上传后可以直接显示图片的 url。

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

java 复制代码
 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 对应的是上面的 uploadUrlcontentType 也是上面服务端返回的 ,
imageUrl 对应的是 服务端返回的字段 url

遇到的坑:

  1. contentType 我直接写死的 application/json,应该是用服务端返回的 contentType。
  2. 显示照片我也用的是 uploadUrl导致,报如下的错误:
java 复制代码
SignatureDoesNotMatch: The request signature we calculated does not match the signature you provided. Check your key and signing method

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

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

相关推荐
Yan-英杰2 小时前
DeepSeek-R1模型现已登录亚马逊云科技
java·大数据·人工智能·科技·机器学习·云计算·deepseek
XINVRY-FPGA5 小时前
Xilinx FPGA XCVC1902-2MSEVSVA2197 Versal AI Core系列芯片的详细介绍
人工智能·嵌入式硬件·5g·ai·fpga开发·云计算·fpga
写雨.01 天前
鸿蒙定位开发服务
华为·harmonyos·鸿蒙
你觉得2051 天前
浙江大学朱霖潮研究员:《人工智能重塑科学与工程研究》以蛋白质结构预测为例|附PPT下载方法
大数据·人工智能·机器学习·ai·云计算·aigc·powerpoint
久违の欢喜1 天前
《云端变革:云计算重塑现代企业架构的实践之路》
架构·云计算
Linux运维老纪1 天前
运维之 Centos7 防火墙(CentOS 7 Firewall for Operations and Maintenance)
linux·安全·centos·云计算·运维开发·火绒
yuzhangfeng2 天前
【云计算物理网络】从传统网络到SDN:云计算的网络演进之路
网络·云计算
ZStack开发者社区2 天前
全球化2.0 | ZStack举办香港Partner Day,推动AIOS智塔+DeepSeek海外实践
人工智能·云计算
久违の欢喜2 天前
《云计算:核心驱动力》
云计算
yuzhangfeng2 天前
【云计算物理网络】数据中心网络架构设计
网络·云计算