HarmonyOS鸿蒙Next中Ark UI的图库中文件上传到服务器
HarmonyOS鸿蒙Next中Ark UI的图库中文件上传到服务器
上传文件的API中支持将应用内部存储路径文件上传，该部分较为简单类似以下代码
request.upload({
url: 上传URL,
files:[
{
filename: this.videoname,
name:'file',
uri:'internal://cache/'+this.videoname,
type:'mp4',
}],
data:[{
name:"userid",
value:this.userid
}]
}, (err, data) => {
if (err) {
prompt.showToast({
message: '上传失败'
})
console.error('Failed to request the upload. Cause: ' + JSON.stringify(err));
return;
}
that.uploadvideostatus = 1;
prompt.showToast({
message: '上传成功'
})
});主要要说一下如何将图库中文件获取到应用内部存储即internal://cache/ 下
mediaLibrary.getMediaLibrary().startMediaSelect(option).then((value) => {
console.log("Media resources selected."+value);
// Obtain the media selection value.
// 使用calculate同步方法，返回OperateData对象。
this.utilInterface = createLocalParticleAbility('应用包名.util.UtilServiceAbility');
this.utilInterface.CopyToCache(value[0],result => {
console.info(this.lable+result)
that.videoname = result;
prompt.showToast({
message: '选择成功'
})
that.UploadVideo();
})
}).catch((err) => {
console.log("An error occurred when selecting media resources.");
prompt.showToast({
message: '选择失败'
})
});在上述代码中调用到PA中的CopyToCache方法
public void CopyToCache(String path, Callback callback) throws IOException {
HiLog.info(LABEL_LOG,"开始");
DataAbilityHelper helper=DataAbilityHelper.creator(StaticV.context);
HiLog.info(LABEL_LOG,"helper");
String fileName = "EXCEPTION";
//原始文件Uri
Uri src = Uri.parse(path);
HiLog.info(LABEL_LOG,"parse "+src);
//通过DataAbilityHelper获取文件名与文件类型
try {
DataAbilityHelper pathHelper = DataAbilityHelper.creator(StaticV.context, src, false);
ResultSet resultSet = pathHelper.query(src,null,null);
HiLog.info(LABEL_LOG,"数量"+resultSet.getRowCount());
resultSet.goToNextRow();
String srcpath = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.AVBaseColumns.DATA));
HiLog.info(LABEL_LOG,"路径"+srcpath);
String[] strings = srcpath.split("/");
//文件名
fileName = strings[strings.length-1];
HiLog.info(LABEL_LOG,"文件名"+fileName);
resultSet.close();
pathHelper.release();
} catch (DataAbilityRemoteException e) {
e.printStackTrace();
}
if(!fileName.equals("EXCEPTION")){
FileDescriptor srcfd = null;
try {
//图库中文件的文件描述符
srcfd = helper.openFile(src,"r");
} catch (DataAbilityRemoteException e) {
HiLog.info(LABEL_LOG,"srcfd erro "+e);
e.printStackTrace();
}
//获取原始文件输入流
FileInputStream srcfis = new FileInputStream(srcfd);
HiLog.info(LABEL_LOG,"fis");
String tarpath = StaticV.context.getCacheDir().getAbsolutePath();
HiLog.info(LABEL_LOG,tarpath);
//获取应用内部目录的文件输出流
FileOutputStream fos = new FileOutputStream(tarpath+"/"+fileName);
int length;
byte[] buffer = new byte[1024];
while((length = srcfis.read(buffer))!=-1){
fos.write(buffer,0,length);
}
HiLog.info(LABEL_LOG,"写入完成");
srcfis.close();
fos.close();
helper.release();
callback.reply(fileName);
File tarfile = new File(tarpath+"/"+fileName);
HiLog.info(LABEL_LOG, String.valueOf(tarfile.isFile()));
}
}StaticV.context即应用上下文
6 回复
想请教一下，这样传给后端是什么形式呢？二进制流嘛？后端php写的话应该如何获取呢
更多关于HarmonyOS鸿蒙Next中Ark UI的图库中文件上传到服务器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，使用Ark UI实现图库文件上传到服务器的过程主要涉及以下几个步骤：
-
获取图库文件：通过
@ohos.file.picker模块的PhotoViewPicker类，调用select方法选择图库中的文件。该方法返回一个Promise对象，解析后可以得到文件的URI。 -
读取文件内容：使用
@ohos.file.fs模块的fs.openSync和fs.readSync方法，根据获取的URI读取文件内容。读取的内容可以存储在ArrayBuffer中。 -
上传文件到服务器：通过
@ohos.net.http模块的HttpRequest类，创建HTTP请求。将读取的文件内容作为请求体，设置适当的请求头（如Content-Type），然后发送POST请求到服务器。 -
处理服务器响应：服务器处理完文件上传请求后，会返回响应。可以通过
HttpRequest的on方法监听complete事件，获取服务器返回的数据，并根据需要进行处理。
以下是代码示例：
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import http from '@ohos.net.http';
async function uploadImage() {
// 选择图库文件
const photoPicker = new picker.PhotoViewPicker();
const photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;
const result = await photoPicker.select(photoSelectOptions);
const fileUri = result.photoUris[0];
// 读取文件内容
const file = fs.openSync(fileUri, fs.OpenMode.READ_ONLY);
const buffer = new ArrayBuffer(1024);
fs.readSync(file.fd, buffer);
fs.closeSync(file);
// 上传文件到服务器
const httpRequest = http.createHttp();
const options = {
method: http.RequestMethod.POST,
header: {
'Content-Type': 'image/jpeg'
},
extraData: buffer
};
httpRequest.request('https://your-server-url/upload', options, (err, data) => {
if (err) {
console.error('Upload failed:', err);
} else {
console.log('Upload success:', data.result);
}
httpRequest.destroy();
});
}
在HarmonyOS鸿蒙Next中，使用Ark UI实现文件上传到服务器，可以通过以下步骤进行：
- 选择文件：使用
FilePicker组件让用户选择需要上传的文件。 - 读取文件：通过
FileReader读取文件内容，转换为二进制数据或Base64编码。 - 网络请求：使用
Http或FetchAPI发起POST请求，将文件数据发送到服务器。 - 处理响应：接收服务器返回的响应，进行成功或失败的处理。
示例代码：
import http from '@ohos.net.http';
let filePicker = new FilePicker();
filePicker.pick().then(file => {
let fileReader = new FileReader();
fileReader.readAsArrayBuffer(file).then(data => {
let httpRequest = http.createHttp();
let options = {
method: 'POST',
url: 'https://your-server.com/upload',
header: { 'Content-Type': 'application/octet-stream' },
extraData: data
};
httpRequest.request(options).then(response => {
console.log('Upload success:', response.result);
}).catch(error => {
console.error('Upload failed:', error);
});
});
});确保服务器端已配置好接收文件上传的接口。
