HarmonyOS 鸿蒙Next能否提供一个选择相册图片或者拍照并上传到服务端的demo
HarmonyOS 鸿蒙Next能否提供一个选择相册图片或者拍照并上传到服务端的demo
能否提供一个选择相册图片、拍照文件并上传到服务端的demo
3 回复
参考下:
selectPicture() {
try {
let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = 1;
let photoPicker = new photoAccessHelper.PhotoViewPicker();
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
console.info('==SY==PhotoViewPicker.select successfully, PhotoSelectResult uri: ' +
JSON.stringify(PhotoSelectResult.photoUris));
this.uploadImage(PhotoSelectResult.photoUris[0])
}).catch((err: BusinessError) => {
console.error(`PhotoViewPicker.select failed with err: ${err.code}, ${err.message}`);
});
} catch (error) {
let err: BusinessError = error as BusinessError;
console.error(`PhotoViewPicker failed with err: ${err.code}, ${err.message}`);
}
}
uploadImage(uri:string){
const resFile = fs.openSync(uri, fs.OpenMode.READ_ONLY)
let newPath = `${getContext().cacheDir}/${resFile.name}`;
fs.copyFileSync(resFile.fd, newPath)
console.info('uri = ' + uri, 'newPath = ' + newPath)
let files: Array<request.File> = [
{
filename: resFile.name,
name: 'file',
uri: `internal://cache/${resFile.name}`,
type: 'image/png'
}
]
let header = new Map<Object, string>()
let uploadConfig: request.UploadConfig = {
url: 'http://xxxx',
header: header,
method: 'POST',
files: files,
data: []
};
try {
request.uploadFile(getContext(), uploadConfig).then((data: request.UploadTask) => {
console.error('uploadFile')
console.error(`${JSON.stringify(data)}`)
data.on('complete', (taskStates: Array<request.TaskState>) => {
console.info(`upload complete taskState: ${JSON.stringify(taskStates[0])}`);
});
data.on('headerReceive', (headers: object) => {
console.info("upOnHeader headers:" + JSON.stringify(headers));
})
data.on('fail', (taskStates: Array<request.TaskState>) => {
for (let i = 0; i < taskStates.length; i++) {
console.info("upOnFail taskState:" + JSON.stringify(taskStates[i]));
}
})
}).catch((err: BusinessError) => {
console.error(`Failed to request the upload. Code: ${err.code}, message: ${err.message}`);
});
} catch (err) {
console.error(`Failed to request the upload. err: ${JSON.stringify(err)}`);
}
}
更多关于HarmonyOS 鸿蒙Next能否提供一个选择相册图片或者拍照并上传到服务端的demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以参考这个,虽然是api9的,但是逻辑是一样的
https://developer.huawei.com/consumer/cn/forum/topic/0204125002844134087?fid=0101587866109860105
HarmonyOS 鸿蒙Next确实支持实现选择相册图片或者拍照并上传到服务端的功能。以下是一个简化的示例流程,不涉及具体代码实现,但会概述关键步骤:
-
权限申请:
- 在
config.json
中声明必要的权限,包括相机、相册访问及网络访问权限。
- 在
-
UI设计:
- 设计两个按钮,一个用于选择相册图片,另一个用于启动相机拍照。
- 设计一个图片展示区域用于预览选中的图片。
-
功能实现:
- 使用
MediaStore
API实现相册图片的选择。 - 使用相机API实现拍照功能。
- 选中或拍摄图片后,利用
BitmapFactory
加载图片并展示。 - 将图片转换为字节数组,通过HTTP请求(如使用
OkHttp
库)上传到服务端。
- 使用
-
上传处理:
- 构建HTTP POST请求,将图片数据作为请求体发送至服务端接口。
- 处理服务端响应,确认图片是否成功上传。
请注意,上述描述为简化流程,实际开发中需考虑异常处理、UI线程切换等细节。具体实现需参考HarmonyOS官方文档及API指南。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html