HarmonyOS鸿蒙Next中封装文件上传

HarmonyOS鸿蒙Next中封装文件上传 应用文件上传下载：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-file-upload-download

使用Picker选择媒体库资源：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/photoaccesshelper-photoviewpicker

1、上传应用文件

说明

当前上传应用文件功能。request.uploadFile方式仅支持上传应用缓存文件路径（cacheDir）下的文件，request.agent方式支持上传用户公共文件和应用缓存文件路径下的文件。

使用上传下载模块，需声明权限：
ohos.permission.INTERNET。

// 1、获取文件上下文
let context=getContext(this) as common.UIAbilityContext
// 获取到缓存的文件路径
let cacheDir=context.cacheDir

/**
 * 封装文件上传函数
 */
export function FileUpload(){
  // 2、准备上传需要的数据结构
  // 新建一个本地应用文件,赋予读写和创建的权限
  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 header=new Map<Object,string>()
  // multipart/form-data代表可以上传多个文件
  header.set('Content-type','multipart/form-data')

  // 准备上传的文件对象
  let files:Array<request.File>=[
    {filename:'test',name:'file',uri:'internal://cache/test.txt',type:'txt'}
  ]
  // 文件上传的时候，给服务传递参数
  let data:Array<request.RequestData>=[{name:'name',value:'value'}]
  // 文件上传的参数对象
  let uploadConfig:request.UploadConfig={
    url:'http://nocat.life:3012/images/upload',
    header:header,
    method:'POST',
    files:files,
    data:data
  }
  // 3、 将本地应用文件上传至网络服务器
  try {
    request.uploadFile(context,uploadConfig)
      .then((uploadTask:request.UploadTask)=>{
        // 监听上传状态
        uploadTask.on('complete',(taskStates:Array<request.TaskState>)=>{
          // 上传的时候可能上传多个文件，每个文件结果循环打印出来
          for (let index = 0; index < taskStates.length; index++) {
            console.info(`upload complete taskState:${JSON.stringify(taskStates[index])}`)
          }
        })
      })
      .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}`)
  }
}

页面代码：

import { FileUpload, PickerPhoto, UpdateFileUpload } from '../utils/FileUpload';

@Entry
@Component
struct DataPage {
  @State imgSrc:string|undefined=''

  build() {
    Column() {
      Button('点击上传')
        .onClick(event=>{
          FileUpload()
        })
    }
    .height('100%')
    .width('100%')
  }
}

2、打开资源库

工具代码：

/**
 * 从本地获取一张图片
 *
 */
export async function PickerPhoto(){
  // 打开系统图库
  const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions()
  // 最多选择一张图片
  photoSelectOptions.maxSelectNumber=1
  // 限制用户只能访问相册资源
  photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE

  // 获取你相册图片地址
  const photoViewPicker = new photoAccessHelper.PhotoViewPicker()
  let urls= await photoViewPicker.select(photoSelectOptions)
  if(urls.photoUris.length<=0){
    return
  }

  let imgUrl=urls.photoUris[0]
  console.log(`选中图片的地址${imgUrl}`)
  return imgUrl
}

页面代码：

import { FileUpload, PickerPhoto, UpdateFileUpload } from '../utils/FileUpload';

@Entry
@Component
struct DataPage {
  @State imgSrc:string|undefined=''

  build() {
    Column() {
      Image(this.imgSrc)
        .width('100%')
        .height(200)
      Button('选择一张图片')
        .onClick(async ()=>{
          const res=await PickerPhoto()
          this.imgSrc=res
        })
    }
    .height('100%')
    .width('100%')
  }
}

3、将本地图库文件拷贝到cache目录

/**
 * 将本地图库文件，拷贝到cache缓存目录
 * [@param](/user/param) photoImgPath
 */
export function copyImgToCache(photoImgPath:string){
  const file=fs.openSync(photoImgPath,fs.OpenMode.READ_ONLY)
  // 文件的唯一标识
  let fileFD=file.fd

  let fileName=Date.now().toString()
  const ext='jpg'
  let fullPath=cacheDir+'/'+fileName+'.'+ext
  fs.copyFileSync(fileFD,fullPath)

  return [`internal://cache/${fileName+'.'+ext}`,fileName+'.'+ext]
}

4、改造FileUpload

工具代码：

/**
 * 改造FileUpload方法
 * [@param](/user/param) imgSrc
 */
export function UpdateFileUpload(imgSrc:string){
  // 2、准备上传需要的数据结构
  // 新建一个本地应用文件,赋予读写和创建的权限
  // let file =fs.openSync(cacheDir+'/test.txt',fs.OpenMode.READ_WRITE|fs.OpenMode.CREATE)
  // // 在文件中写入数据
  // fs.writeSync(file.fd,'upload file test')
  // // 关闭写入
  // fs.closeSync(file)
  const array=copyImgToCache(imgSrc)

  // 上传任务配置项
  let header=new Map<Object,string>()
  // multipart/form-data代表可以上传多个文件
  header.set('Content-type','multipart/form-data')

  // 准备上传的文件对象
  let files:Array<request.File>[