【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函数来申请媒体相关的权限。具体逻辑如下:
- 定义权限列表:需要请求读写媒体文件的权限,定义一个包含
Permissions.READ_MEDIA和Permissions.WRITE_MEDIA的数组。 - 请求权限:调用
applyPermission函数请求权限,并等待用户响应。 - 检查权限状态:通过返回值
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);
});
}
具体逻辑如下:
- 设置照片选择选项:
- 创建
PhotoSelectOptions对象,设置MIMEType为图像类型,确保用户只能选择照片。 - 设置
maxSelectNumber为1,表示用户只能选择一张照片。
- 创建
- 创建照片选择器:使用
photoViewPicker对象来选择照片或拍照。 - 执行选择操作:
- 使用
photoViewPicker.select方法选择照片,并等待用户响应。 - 如果用户选中了照片,获取选中的照片URI。
- 使用
- 处理选中的照片:
- 调用
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);
});
}
具体逻辑如下:
- 构建表单数据:
- 创建
FormData对象。 - 使用
formData.append方法将文件路径添加到表单数据中,键名为file。
- 创建
- 配置请求:
- 创建
config对象,设置请求头Content-Type为multipart/form-data,并传入当前上下文context。
- 创建
- 发送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);
});
}
具体逻辑如下:
- 定义下载配置:
- 创建
downloadConfig对象,包含文件的URL、本地保存路径和是否允许使用计量网络。
- 创建
- 创建下载任务:
- 使用
request.downloadFile方法创建下载任务,并等待任务创建的结果。
- 使用
- 监听下载进度:
- 使用
downloadTask.on('progress')方法监听下载进度,并在每次进度更新时输出已接收的字节数和总字节数。
- 使用
- 监听下载完成:
- 使用
downloadTask.on('complete')方法监听下载完成事件,并在下载完成后输出成功信息。
- 使用
- 处理下载错误:
- 如果下载任务创建失败或下载过程中出现错误,输出错误信息。
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);
});
}
具体逻辑如下:
- 创建文件URI对象:
- 使用
fileUri.FileUri构造函数创建fileUriObject对象,传入文件路径。
- 使用
- 定义文件信息:
- 创建
fileInfo对象,包含文件标题、完整URI和MIME类型。 - 根据文件类型设置MIME类型,例如PDF文件的MIME类型为
application/pdf。
- 创建
- 预览文件:
- 使用
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

最低0.47元/天 解锁文章
5228

被折叠的 条评论
为什么被折叠?



