uni-app 支持华为OBS文件上传

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 支持华为OBS文件上传

华为obs的只提供了安卓，ios，浏览器以及服务器端的sdk，uni-app的上传采用的是微信小程序的文件上传模式，给开发者的是文件的本地临时路径，而华为obs浏览器的sdk是需要使用file对象完成上传，所以需要对安卓和ios的sdk进行封装将api暴露给js调用

开发环境 版本号 项目创建方式
安卓 未知 封装
iOS 未知 封装
Harmonyos Next教程
4 回复

可以做，这边做过华为支付，授权登录sdk uniapp原生插件，联系qq：16792999


我目前也有这个问题，请教楼主 后来解决了吗

8年原生技术开发，熟练安卓、IOS各类uniapp混合插件开发，联系QQ: 1328559667

在uni-app中实现华为OBS（对象存储服务）文件上传，可以通过调用华为OBS提供的SDK或API接口来完成。以下是一个简单的代码示例，展示了如何在uni-app中上传文件到华为OBS。

首先，确保你已经获取了华为OBS的访问密钥（Access Key ID和Access Key Secret），以及要上传到的桶（Bucket）名称和区域（Endpoint）。

步骤1：安装华为OBS SDK

由于uni-app主要使用JavaScript进行开发，你可以使用华为OBS提供的JavaScript SDK。在项目中，你可以通过npm或yarn安装OBS SDK（假设已有一个兼容的Node.js环境进行依赖管理）。

npm install @huaweicloud/obs-browser-sdk

步骤2：配置OBS客户端

在你的uni-app项目中，创建一个文件用于配置和初始化OBS客户端。

// obs-client.js
import OBS from '@huaweicloud/obs-browser-sdk';

const config = {
  accessKeyId: 'your-access-key-id',
  accessKeySecret: 'your-access-key-secret',
  serverUrl: 'your-obs-endpoint',
  bucketName: 'your-bucket-name',
};

const obsClient = new OBS.ObsClient({
  access_key_id: config.accessKeyId,
  secret_access_key: config.accessKeySecret,
  server: config.serverUrl,
});

export default obsClient;

步骤3：实现文件上传功能

在你的页面或组件中，使用OBS客户端上传文件。

// upload-page.vue
<template>
  <view>
    <button @click="chooseFile">选择文件</button>
  </view>
</template>

<script>
import obsClient from '@/obs-client';

export default {
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        success: (res) => {
          const filePath = res.tempFiles[0].path;
          this.uploadFileToOBS(filePath);
        },
      });
    },
    async uploadFileToOBS(filePath) {
      try {
        const result = await uni.getFileSystemManager().readFile({
          filePath,
          encoding: 'base64',
        });

        const fileContent = result.data;
        const objectKey = 'your-object-key'; // 上传到OBS的文件路径

        const putResult = await obsClient.putObject({
          Bucket: 'your-bucket-name',
          Key: objectKey,
          Body: fileContent,
          ContentType: 'application/octet-stream', // 根据实际情况设置MIME类型
        });

        console.log('Upload successful:', putResult);
      } catch (error) {
        console.error('Upload failed:', error);
      }
    },
  },
};
</script>

以上代码提供了一个基本的框架，用于在uni-app中选择文件并上传到华为OBS。注意，实际项目中可能需要处理更多的错误情况和边界条件，以及考虑安全性问题，比如密钥管理。

回到顶部