import { BusinessError } from '@ohos.base';
import { rcp } from ‘@kit.RemoteCommunicationKit’;
import { picker } from ‘@kit.CoreFileKit’;
import fs from ‘@ohos.file.fs’;
import { http } from ‘@kit.NetworkKit’;
let uploadUrl: string = ‘http://xxx.xxxxxx:8080/upload’;
function example01(): string {
let uri = ‘’;
let photoViewPicker = new picker.PhotoViewPicker();
let photoSelectOption = new picker.PhotoSelectOptions();
photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoViewPicker.select(photoSelectOption).then((photoSelectResult) => {
console.log(“fyh photoSelectResult:” + photoSelectResult);
uri = photoSelectResult.photoUris[0];
console.log(“fyh uri:” + uri);
try {
let resultPhoto = fs.openSync(uri,fs.OpenMode.READ_ONLY);
let resultName = resultPhoto.name;
let fileTemp = fs.openSync(getContext().filesDir+resultPhoto.name,fs.OpenMode.READ_WRITE|fs.OpenMode.CREATE);
let imageUri = fileTemp.path;
fs.copyFileSync(resultPhoto.fd,fileTemp.fd);
fs.closeSync(resultPhoto);
fs.closeSync(fileTemp);
const httpRequest = http.createHttp();
httpRequest.request(uploadUrl,{
method:http.RequestMethod.POST,
header:{
‘Content-Type’: ‘multipart/form-data’,
‘Connection’:‘keep-alive’
},
expectDataType:http.HttpDataType.ARRAY_BUFFER,
multiFormDataList: [
{
name:‘file’,
contentType: ‘image/jpg’,
filePath: imageUri,
remoteFileName:‘file.jpg’
},
],
},(err,data) => {
console.log(‘fyh:上传结束’)
httpRequest.destroy();
}
)
} catch (err) {
console.error(fyh:Failed to request the upload. err: <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(err)}</span>
);
}
}).catch((err:BusinessError) => {
console.error(Invoke photoViewPicker.select failed, code is <span class="hljs-subst">${err.code}</span>, message is <span class="hljs-subst">${err.message}</span>
);
})
return uri;
}
function testRcpMultiPartUpload() {
example01();
}
function clickget() {
const session = rcp.createSession();
session.get(“http://xxx.xxxxx:8080/getText”).then((response) => {
console.log(“fyh”+JSON.stringify(response));
}).catch((err: BusinessError) => {
console.error(“err:” + JSON.stringify(err));
});
}
@Entry
@Component
struct Index {
@State message: string = ‘Hello World’;
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
testRcpMultiPartUpload();
})
Text(‘getText’)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
clickget();
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
网络图片的url转换成图片的PixelMap看是否能够满足诉求
更多关于HarmonyOS 鸿蒙Next 实现图片上传demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中实现图片上传demo,可以通过以下步骤实现核心功能:
-
界面布局: 使用XML布局文件定义一个包含
Image
组件和Button
组件的界面。Image
组件用于显示选中的图片,Button
组件用于触发图片上传操作。 -
图片选择: 使用
mediastore
模块或ability
的startActivityForResult
方法启动图片选择器,允许用户从相册或相机中选择图片。选中的图片路径通过回调方法获取。 -
图片上传: 使用
Network
模块进行HTTP请求,将选中的图片文件转换为字节数组或Base64编码字符串,通过POST请求发送到服务器。请求头中可包含必要的认证信息。 -
处理响应: 在回调方法中处理服务器响应,如显示上传成功或失败的提示信息。
示例代码片段(伪代码,具体实现需根据API文档调整):
// 伪代码示例,实际开发中需替换为鸿蒙API
// 布局文件中定义Image和Button
// 在Ability中实现图片选择和上传逻辑
Image image;
Button uploadButton;
image.setClickedListener(component -> {
// 启动图片选择器
});
uploadButton.setClickedListener(component -> {
// 将图片转换为字节数组或Base64编码
// 发送HTTP POST请求上传图片
});
注意:以上代码为伪代码,需根据HarmonyOS的实际API进行开发。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html