Harmony NEXT-越过相机读写权限上传图片至项目云存储中

问题成因

在制作用户注册登录界面时想要实现用户头像上传共能,查询API文档,发现有picker和PhotoAccessHelper两个包可以选择使用,但是在使用PhotoAccessHelper包拉起相册并读入所选的照片后将该照片传入云存储中产生报错,需要相册读写权限,但是该权限是受限权限,不容易获取,查询API发现有使用picker包跳过该权限实现该功能的方法,但是代码粘进项目跑了一下,发现官方给的示例代码其实还是需要申请相册读写权限的,问题回到如何跳出相册读写权限

思路产生

通过PhotoAccessHelper获取到的相册图片只是不能通过任何形式进行网络传输,但是可以在本地进行操作,那么为什么不能讲数据拷贝成一个可以任我们操作的图片对象呢?

拷贝

TypeScript 复制代码
let storageBucket: cloudStorage.StorageBucket = cloudStorage.bucket();
          // 使用photoAccessHelper选择指定的文件
          let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
          photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
          photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目
          let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
            let fileUri = photoSelectResult.photoUris[0];
            console.info(`pick file ${fileUri}`);
            let fileName = fileUri.split('/').pop() as string;
            console.info(`file name ${fileName}`);
            let cacheFile = `${Date.now()}_${fileName}`;
            console.info(`cacheFile ${cacheFile}`);
            let cacheFilePath = getContext().cacheDir + '/' + cacheFile;

            // 将选中文件copy至cache目录下,文件名为cacheFile
            try {
              let srcFile = fs.openSync(fileUri);
              let dstFile = fs.openSync(cacheFilePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
              fs.copyFileSync(srcFile.fd, dstFile.fd);
              fs.closeSync(srcFile);
              fs.closeSync(dstFile);
            } catch (e) {
              console.info(`copy file failed ${e.message}`);
              return;
            }

这里上传到云存储需要的是cache层级的文件存储路径,如果有其他需求也可以改成其他路径

上传至云存储

TypeScript 复制代码
      // 上传至云存储默认实例
            storageBucket.uploadFile(getContext(this), {
              localPath: cacheFile, // 本地文件路径,context.cacheDir目录下的文件
              cloudPath: `云测路径/${fileName}`    // 云侧路径
            }).then(async (task: request.agent.Task) => {
              task.on('progress', (progress) => {
                console.info(`on progress ${JSON.stringify(progress)}`);
              });
              task.on('completed', (progress) => {
                console.info(`on completed ${JSON.stringify(progress)}`);
              });
              task.on('failed', (progress) => {
                console.error(`on failed ${JSON.stringify(progress)}`);
              });
              task.on('response', (response) => {
                console.info(`on response ${JSON.stringify(response)}`);
              });

              // start task
              task.start((err: BusinessError) => {
                if (err) {
                  console.error(`Failed to start the uploadFile task, Code: ${err.code}, message: ${err.message}`);
                } else {
                  console.info(`Succeeded in starting a uploadFile task.`);
                }
              });
              const url = await storageBucket.getDownloadURL(`avatar/${fileName}`)
              console.log('测试获取下载地址' + url)
              this.avatar = url
            }).catch((err: BusinessError) => {
              console.error(`uploadFile failed, Code: ${err.code}, message: ${err.message}`);
            });

在API12版本可用的跳过相册读写权限从相册读取照片并上传至网络就完成了!

相关推荐
美食家52501 个月前
如何在原生鸿蒙APP中使用RN的bundle包
鸿蒙·react-native·harmony next
Amarao3 个月前
Harmony Next 文件命令操作(发送、读取、媒体文件查询)
鸿蒙·harmony next