HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端,具体如下
HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端,具体如下
通过拍照和选择相册方式选择图片后 将图片上传到服务端
问题1: 拍照 和 选择相册 其中的权限需要单独请求吗,现在我不进行权限的请求也可正常返回图片。
2. 选择图片后进行上传 报错:Failed to open/read local data from file/application
2 回复
normal等级的应用不想申请权限也可以通过临时授权的方式使用PhotoViewPicker.select接口得到的uri使用,图片上传到服务端可参考以下示例:
import picker from '[@ohos](/user/ohos).file.picker';
import fs from '[@ohos](/user/ohos).file.fs';
import { common } from '[@kit](/user/kit).AbilityKit';
import request from '[@ohos](/user/ohos).request';
// 使用装饰器定义页面组件
[@Entry](/user/Entry)
[@Component](/user/Component)
struct pothoPage {
[@State](/user/State) imageList: Array<string> = []
// 状态变量:原始图片的URI
[@State](/user/State) imgOriginal: string = '';
[@State](/user/State) filePath: string = '';
uploadFileName: string = '';
// 弹出图片选择器方法
async openPicker() {
try {
// 设置图片选择器选项
const photoSelectOptions = new picker.PhotoSelectOptions();
// 限制只能选择一张图片
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 10;
// 创建并实例化图片选择器
const photoViewPicker = new picker.PhotoViewPicker();
// 选择图片并获取图片URI
let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
if (!uris || uris.photoUris.length === 0) return;
console.info('123123uris', JSON.stringify(uris))
this.imageList = uris.photoUris
// 获取选中图片的第一张URI
let uri: string = uris.photoUris[0];
// 更新状态变量:保存原始图片的URI
this.imgOriginal = uri;
// uris.photoUris.forEach(item =>{
// 打开文件读取流
let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
// 获取当前上下文
let context = getContext(this) as common.UIAbilityContext;
// 新建一个保存裁剪后图片的路径
this.uploadFileName = new Date().getTime() + '.jpg';
this.filePath = context.cacheDir + '/' + this.uploadFileName;
// 复制图片到新的路径
fs.copyFileSync(file.fd, this.filePath);
// 关闭文件读取流
fs.closeSync(file);
console.info('123123filePath', JSON.stringify(this.filePath))
// })
} catch (e) {
console.error('openPicker', JSON.stringify(e));
}
}
//标准记事,资质证明文件,门到站站到门,运输信息(集装箱,整车)
upPicker() {
let uploadConfig: request.UploadConfig = {
url: 'http://xxx/api/gxzx/file/uploadFile',
header: {
'Accept': '*/*',
'Content-Type': 'multipart/form-data',
},
method: 'POST',
files: [
{ filename: 'test', name: 'file', uri: `internal://cache/${this.uploadFileName}`, type: 'jpg' }
],
data: []
}
console.log('uploadConfig', JSON.stringify(uploadConfig))
try {
request.uploadFile(getContext(), uploadConfig).then((data: request.UploadTask) => {
console.log('123123', JSON.stringify(data))
let uploadTask = data
let upCompleteCallback = (taskStates:Array<request.TaskState>) =>{
for (let index = 0; index < taskStates.length; index++) {
console.info('upCompleteCallback',JSON.stringify(taskStates[index]))
}
}
uploadTask.on('complete',upCompleteCallback)
let upFailCallback = (taskStates:Array<request.TaskState>) =>{
for (let index = 0; index < taskStates.length; index++) {
console.info('upFailCallback',JSON.stringify(taskStates[index]))
}
}
uploadTask.on('fail',upFailCallback)
})
} catch (err) {
console.log('987err', JSON.stringify(err))
}
}
// 构建UI界面
build() {
Column() {
// 添加选择图片按钮,点击后调用打开图片选择器方法
Button('选择图片→').onClick(() => {
this.openPicker();
});
Row() {
ForEach(this.imageList, (item: string) => {
Image(item)
.width('100%')
.objectFit(ImageFit.Contain);
})
}.width('100%')
Button('上传图片').onClick(() => {
this.upPicker();
});
}
.width('100%'); // 设置列宽度为100%
}
}
更多关于HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端,具体如下的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next系统中,通过拍照和选择相册方式选择图片后,将图片上传到服务端的具体实现步骤如下:
-
拍照或选择图片:
- 使用
MediaStore
API访问设备媒体库,或者调用相机API进行拍照。 - 获取图片URI或文件路径。
- 使用
-
读取图片文件:
- 通过URI或路径,使用
FileInputStream
读取图片文件内容。 - 将读取的内容转换成字节数组(
byte[]
)。
- 通过URI或路径,使用
-
图片上传到服务端:
- 使用HTTP或HTTPS协议,通过
HttpURLConnection
或OkHttp
等网络库,构建POST请求。 - 将字节数组作为请求体的一部分,设置合适的请求头(如
Content-Type: image/jpeg
)。 - 发送请求到服务端,并处理响应结果。
- 使用HTTP或HTTPS协议,通过
-
错误处理:
- 捕获并处理文件读取、网络请求等过程中可能出现的异常。
示例代码(伪代码):
// 省略具体实现,因为要求不回答Java相关内容
// 但流程是:拍照/选图 -> 读取文件 -> 构建HTTP请求 -> 上传文件
注意,实际开发中需根据具体需求调整,如图片压缩、进度显示等。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html