uni-app 云相册选择照片功能

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

uni-app 云相册选择照片功能

类似于uni.chooseImage(OBJECT) 的功能。但是目前只支持本地照片和相机2个选项，可否加上云端的相册的功能？选择服务器的图片文件。或者在已有组件中如何搭配得到这样的功能

开发环境 版本号 项目创建方式
uni-app 3.0.0 Vue CLI
Harmonyos Next教程
4 回复

这个属于自己要实现的功能,不能说uni.open(商城) ,啥都给你实现了


我也尝试了自己实现 主要需要一些底层的权限吧 毕竟选择图片这种是要api唤起手机的操作

专业插件开发 592944557@qq.com

在uni-app中实现云相册选择照片功能，通常需要结合云存储服务和前端的选择组件来完成。以下是一个简单的示例，展示了如何使用uni-app与阿里云OSS（对象存储服务）结合，实现云相册选择照片功能。

步骤一：配置阿里云OSS

首先，你需要在阿里云OSS中创建一个存储空间（Bucket），并获取相应的AccessKeyId、AccessKeySecret、Bucket名称和Region。

步骤二：安装阿里云SDK

在uni-app项目中，你可以使用阿里云官方提供的JavaScript SDK。可以通过npm安装：

npm install ali-oss --save

步骤三：前端代码实现

  1. 引入阿里云OSS SDK
import OSS from 'ali-oss';

const client = new OSS({
  region: '<Your Region>',
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
  bucket: '<Your Bucket Name>'
});
  1. 获取云相册照片列表
async function getPhotoList() {
  try {
    const result = await client.list({
      prefix: 'photos/',  // 假设照片存放在photos/目录下
      delimiter: '/',
      maxKeys: 100  // 每次最多获取100张照片
    });
    return result.objects.map(obj => ({
      url: client.signatureUrl('GET', obj.name, { expires: 3600 }),  // 生成带签名的URL，有效期1小时
      name: obj.name.split('/').pop()  // 获取文件名
    }));
  } catch (error) {
    console.error('Failed to get photo list:', error);
    return [];
  }
}
  1. 在页面中展示照片并选择
<template>
  <view>
    <view v-for="photo in photos" :key="photo.name" class="photo-item">
      <image :src="photo.url" @click="selectPhoto(photo)" class="photo"></image>
    </view>
    <view>
      <text>Selected Photo: {{ selectedPhoto ? selectedPhoto.name : 'None' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photos: [],
      selectedPhoto: null
    };
  },
  async mounted() {
    this.photos = await getPhotoList();
  },
  methods: {
    selectPhoto(photo) {
      this.selectedPhoto = photo;
    }
  }
};
</script>

<style>
.photo-item {
  display: inline-block;
  margin: 10px;
}
.photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>

以上代码展示了如何通过阿里云OSS SDK获取云相册中的照片列表，并在uni-app的页面中展示和选择照片。注意，这只是一个基本示例，实际应用中可能需要考虑更多的细节，比如错误处理、权限控制、性能优化等。

回到顶部