鸿蒙开发app上传图片到阿里云oss

首先吐糟下阿里云官方,现在都7月底了,还没出鸿蒙版本oss的sdk,正常应该很多app都是接阿里云oss上传的啊,而且我感觉封装一个oss的sdk也不难,核心的就是图片上传

问题:阿里云官方不提供,但是我们项目没法等啊,问题还得要解决,也只能自己解决
可行的解决方案:
1、app中嵌入web,把图片地址传给web,由web调用web的oss sdk,web去上传到oss上(应该是可行的,但是经过web是不稳定的,并且界面怎么办,不可能所有上传界面都用web来做)
2、app传图片到自己服务器,自己服务器再上传到阿里云oss(可行,但是这种往往需要压缩图片,否则会很久或者链接会断开,因为这里经过了两次上次图片文件,你传服务器,服务器传给阿里云)
3、app尝试客户端直传方式给阿里云oss(弄了挺长时间,不断修改,最终测试可行)。参考文档:
https://help.aliyun.com/zh/oss/use-cases/uploading-objects-to-oss-directly-from-clients/#36c322a437r3k

核心代码:

let formData: Array<http.MultiFormData> = []
  try {
     formData = [
      { name: 'name', contentType: 'text/plain', data: file.name },
      { name: 'policy', contentType: 'text/plain', data: data.policy },
      { name: 'OSSAccessKeyId', contentType: 'text/plain', data: accesskeyId },
      { name: 'success_action_status', contentType: 'text/plain', data: '200' },
      { name: 'signature', contentType: 'text/plain', data: data.signature },
      { name: 'key', contentType: 'text/plain', data: `${dir}${name}` },
      { name: 'file', contentType: 'text/plain', filePath: file.path, remoteFileName: file.name }
    ]
  } catch (e) {
    logContent("data166",e)
    uploadCallback()
  }

如果你要参考我写的代码,可评论或者私信我。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue3是一种流行的JavaScript框架,用于构建用户界面。它具有响应式数据绑定、组件化开发和虚拟DOM等特性,使得开发者可以更高效地构建交互式的Web应用程序。 要在Vue3中实现上传图片阿里云OSS,你可以按照以下步骤进行操作: 1. 安装依赖:首先,你需要安装阿里云OSS的JavaScript SDK。可以使用npm或yarn命令来安装,例如: ``` npm install ali-oss ``` 2. 配置OSS客户端:在Vue3的代码中,你需要创建一个OSS客户端实例,并配置相关参数,如AccessKeyId、AccessKeySecret、Endpoint等。这些参数可以在阿里云OSS控制台中获取。 3. 创建上传组件:在Vue3中,你可以创建一个上传组件,用于选择图片文件并触发上传操作。可以使用`<input type="file">`元素来实现文件选择功能,并监听其`change`事件。 4. 上传图片:在上传组件中,你可以编写上传图片的逻辑。当用户选择了图片文件后,你可以通过OSS客户端调用`put`方法来上传图片文件到阿里云OSS。 下面是一个简单的示例代码,演示了如何在Vue3中上传图片阿里云OSS: ```javascript <template> <div> <input type="file" @change="handleFileChange"> </div> </template> <script> import OSS from 'ali-oss'; export default { methods: { handleFileChange(event) { const file = event.target.files[0]; const client = new OSS({ accessKeyId: 'your-access-key-id', accessKeySecret: 'your-access-key-secret', bucket: 'your-bucket-name', region: 'your-oss-region', // 其他配置参数... }); // 生成唯一的文件名 const fileName = Date.now() + '-' + file.name; // 调用OSS客户端的put方法上传文件 client.put(fileName, file).then(response => { console.log('上传成功', response); // 在这里可以处理上传成功后的逻辑 }).catch(error => { console.error('上传失败', error); // 在这里可以处理上传失败后的逻辑 }); } } } </script> ``` 请注意,上述代码中的`your-access-key-id`、`your-access-key-secret`、`your-bucket-name`和`your-oss-region`需要替换为你自己的阿里云OSS相关信息。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值