1 .新建页面 ，名称为uploadFilePage.ets
import { pickerPhoto, uploadFileFn } from '../../utils/uploadFile';
@Entry
@Component
struct UploadFilePage {
@State message: string = 'Hello World';
@State imgSrc: string | undefined = ''
build() {
Column() {
Image('拿到图片url，展示图片' + this.imgSrc).width(30)
Button('选中一张图片').onClick(async () => {
let res = await pickerPhoto()
console.log('----imgSrc?' + JSON.stringify(res))
})
Button('uploadFile').onClick(() => {
uploadFileFn()
})
}
.height('100%')
.width('100%')
}
}
2.新建util包 新建uploadFile.ets
//1.photoviewPicker.select()//拉起图库
//2.request.uploadFile(context,uploadConfig) 调用文件上传接口
// 方式一:request.uploadFile
// pages/xxx.ets
import { common } from '@kit.AbilityKit';
import fs from '@ohos.file.fs';
import { BusinessError, request } from '@kit.BasicServicesKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let cacheDir = context.cacheDir;
// 参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/photoaccesshelper-photoviewpicker
export async function pickerPhoto() {
const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE。
photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目。
let uris: Array<string> = [];
const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
let photoSelectResult= await photoViewPicker.select(photoSelectOptions)
uris = photoSelectResult.photoUris;
return uris
}
/**
* 文件上传流程*/
export function uploadFileFn() {
// 新建一个本地应用文件
let file = fs.openSync(cacheDir + '/test.txt', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, 'upload file test');
fs.closeSync(file);
// 上传任务配置项
let files: Array<request.File> = [
//uri前缀internal://cache 对应cacheDir目录
{
filename: 'test.txt',
name: 'test',
uri: 'internal://cache/test.txt',
type: 'txt'
}
]
let data: Array<request.RequestData> = [{ name: 'name', value: 'value' }];
let uploadConfig: request.UploadConfig = {
url: 'https://xxx',
header: {
'key1': 'value1',
'key2': 'value2'
},
method: 'POST',
files: files,
data: data
}
// 将本地应用文件上传至网络服务器
try {
request.uploadFile(context, uploadConfig)
.then((uploadTask: request.UploadTask) => {
uploadTask.on('complete', (taskStates: Array<request.TaskState>) => {
for (let i = 0; i < taskStates.length; i++) {
console.info(`upload complete taskState: ${JSON.stringify(taskStates[i])}`);
}
});
})
.catch((err: BusinessError) => {
console.error(`Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
})
} catch (error) {
let err: BusinessError = error as BusinessError;
console.error(`Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
}
}
