【HarmonyOS NEXT】深入解析HarmonyOS NEXT中的媒体处理功能

【HarmonyOS NEXT】深入解析HarmonyOS NEXT中的媒体处理功能

在HarmonyOS NEXT中,媒体处理功能是应用开发的核心部分,包括照片上传、拍照上传、文件下载和文件预览。本文将详细介绍这些功能的实现方法和代码细节,帮助你更好地理解和应用HarmonyOS NEXT的API。

HarmonyOS NEXT中的媒体处理功能

1. 照片上传与拍照上传

在HarmonyOS NEXT中,照片上传和拍照上传功能通常涉及权限申请、媒体选择或拍摄以及文件上传三个步骤。

1.1 权限申请

在进行任何媒体操作之前,应用需要获取用户的权限。以下是如何检查和申请媒体读写权限的代码:

import {
   
    Permissions } from '@ohos.abilityAccessCtrl';
import {
   
    applyPermission } from './permissions';

async function checkAndRequestPermissions() {
   
   
  const permissions = [Permissions.READ_MEDIA, Permissions.WRITE_MEDIA];
  const status = await applyPermission(context, permissions);
  if (status) {
   
   
    console.log('All permissions are granted.');
  } else {
   
   
    console.error('Some permissions are not granted.');
  }
}

在这段代码中,我们使用了applyPermission函数来申请媒体相关的权限。具体逻辑如下:

  1. 定义权限列表:需要请求读写媒体文件的权限,定义一个包含Permissions.READ_MEDIAPermissions.WRITE_MEDIA的数组。
  2. 请求权限:调用applyPermission函数请求权限,并等待用户响应。
  3. 检查权限状态:通过返回值status检查用户是否授予了所有请求的权限。如果全部授予,则输出成功信息;否则,输出错误信息。
1.2 从相册选择照片或拍照

使用photoAccessHelper模块,我们可以方便地从相册选择照片或使用相机拍照。以下是如何实现这一功能的代码:

import {
   
    photoAccessHelper } from '@kit.MediaLibraryKit';

async function selectPhotoOrTakePhoto() {
   
   
  const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
  photoSelectOptions.maxSelectNumber = 1;

  const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
  try {
   
   
    const photoSelectResult = await photoViewPicker.select(photoSelectOptions);
    if (photoSelectResult.photoUris.length > 0) {
   
   
      const photoUri = photoSelectResult.photoUris[0];
      // 处理选中的照片
      handleSelectedPhoto(photoUri);
    }
  } catch (error) {
   
   
    console.error('Failed to select photo or take photo.', error);
  }
}

function handleSelectedPhoto(photoUri) {
   
   
  // 将照片复制到应用的沙箱目录
  copyFileToCache(photoUri, context).then((filePath) => {
   
   
    // 上传照片
    uploadPhoto(filePath);
  });
}

具体逻辑如下:

  1. 设置照片选择选项
    • 创建PhotoSelectOptions对象,设置MIMEType为图像类型,确保用户只能选择照片。
    • 设置maxSelectNumber为1,表示用户只能选择一张照片。
  2. 创建照片选择器:使用photoViewPicker对象来选择照片或拍照。
  3. 执行选择操作
    • 使用photoViewPicker.select方法选择照片,并等待用户响应。
    • 如果用户选中了照片,获取选中的照片URI。
  4. 处理选中的照片
    • 调用handleSelectedPhoto函数,将选中的照片复制到应用的沙箱目录。
    • 如果复制成功,调用uploadPhoto函数上传照片。
1.3 照片上传

上传照片的实现涉及到构建表单数据并发送HTTP请求。以下是如何实现照片上传的代码:

import {
   
    uploadImg } from '../api/User';

function uploadPhoto(filePath) {
   
   
  const formData = new FormData();
  formData.append('file', filePath);

  const config = {
   
   
    headers: {
   
   
      'Content-Type': 'multipart/form-data',
    },
    context: context,
  };

  uploadImg(formData, config).then((response) => {
   
   
    if (response.data && response.data.url) {
   
   
      console.log('Photo uploaded successfully.', response.data.url);
    }
  }).catch((error) => {
   
   
    console.error('Failed to upload photo.', error);
  });
}

具体逻辑如下:

  1. 构建表单数据
    • 创建FormData对象。
    • 使用formData.append方法将文件路径添加到表单数据中,键名为file
  2. 配置请求
    • 创建config对象,设置请求头Content-Typemultipart/form-data,并传入当前上下文context
  3. 发送HTTP请求
    • 调用uploadImg函数发送HTTP请求上传照片。
    • 如果上传成功,检查response.data中的url属性,输出上传成功的URL。
    • 如果上传失败,输出错误信息。

ps:uploadImg
这里的uploadImg 方法本质上是一个封装好的axios请求,最主要的内容是对headers、formData 设置;axios的封装就不在此赘述了。

2. 文件下载

文件下载功能可以通过request模块实现。以下是如何创建下载任务并监听进度和完成事件的代码:

import {
   
    request } from '@kit.BasicServicesKit';

function downloadFile(url, filePath) {
   
   
  const downloadConfig = {
   
   
    url: url,
    filePath: filePath,
    enableMetered: true,
  };

  request.downloadFile(downloadConfig).then((downloadTask) => {
   
   
    downloadTask.on('progress', (receivedSize, totalSize) => {
   
   
      console.info(`Download progress: ${
     
     receivedSize} of ${
     
     totalSize}`);
    });

    downloadTask.on('complete', () => {
   
   
      console.info('Download completed');
    });
  }).catch((error) => {
   
   
    console.error('Download failed', error);
  });
}

具体逻辑如下:

  1. 定义下载配置
    • 创建downloadConfig对象,包含文件的URL、本地保存路径和是否允许使用计量网络。
  2. 创建下载任务
    • 使用request.downloadFile方法创建下载任务,并等待任务创建的结果。
  3. 监听下载进度
    • 使用downloadTask.on('progress')方法监听下载进度,并在每次进度更新时输出已接收的字节数和总字节数。
  4. 监听下载完成
    • 使用downloadTask.on('complete')方法监听下载完成事件,并在下载完成后输出成功信息。
  5. 处理下载错误
    • 如果下载任务创建失败或下载过程中出现错误,输出错误信息。
3. 文件预览

文件预览功能可以通过PreviewKit模块实现。以下是如何预览文件的代码:

import {
   
    filePreview } from '@kit.PreviewKit';

function previewFile(filePath) {
   
   
  const fileUriObject = new fileUri.FileUri(filePath);
  const fileInfo = {
   
   
    title: 'File Name',
    uri: fileUriObject.getFullDirectoryUri() + '/File Name',
    mimeType: 'application/pdf', // 根据文件类型设置MIME类型
  };

  filePreview.openPreview(context, fileInfo).then(() => {
   
   
    console.info('File preview succeeded');
  }).catch((error) => {
   
   
    console.error('File preview failed', error);
  });
}

具体逻辑如下:

  1. 创建文件URI对象
    • 使用fileUri.FileUri构造函数创建fileUriObject对象,传入文件路径。
  2. 定义文件信息
    • 创建fileInfo对象,包含文件标题、完整URI和MIME类型。
    • 根据文件类型设置MIME类型,例如PDF文件的MIME类型为application/pdf
  3. 预览文件
    • 使用filePreview.openPreview方法打开文件预览,传入当前上下文context和文件信息。
    • 如果预览成功,输出成功信息。
    • 如果预览失败,输出错误信息。

辅助工具方法

为了更好地管理和处理权限、文件操作等,我们可以编写一些辅助工具方法。

复制文件到缓存目录
import fs from '@ohos.file.fs';
import {
   
    JSON } from '@kit.ArkTS';

/**
 * 复制文件到缓存目录下
 * @param path :文件路径
 * @param context :Context
 * @returns Promise<string> 移动后文件路径
 */
export async function copyFileToCache(path: string, context: Context): Promise<string> {
   
   
  try {
   
   
    const file = fs.openSync(path, fs.OpenMode.READ_ONLY);
    console.log('cwx-copyFileToCache-', JSON.stringify(file));
    if (file) {
   
   
      const fileDir = `${
     
     context.cacheDir}`; // 临时文件目录
      const filename = path.split('/').pop(); // 获取文件名
      const newPath = `${
     
     new Date().getTime()}_${
     
     filename}`;
      const targetPath = `${
     
     fileDir}/${
     
     newPath}`;
      fs.copyFileSync(file.fd, targetPath);
      fs.closeSync(file.fd);
      return newPath;
    } else {
   
   
      return '';
    }
  } catch (e) {
   
   
    console.error('cwx-copyFileToCache-err-', JSON.stringify(e));
    return
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值