鸿蒙开发-图片上传学习总结

绝不讲道李同学
356 阅读4分钟

图片上传流程

1、从相册中选择所要上传的图片

2、将选择的图片拷贝到应用缓存目录中

3、将缓存中的图片上传到服务器中

选择图片

导入模块 import { photoAccessHelper } from '@kit.MediaLibraryKit' 链接入口

PhotoSelectOptions

图库选择选项子类

名称类型必填说明
MIMETypePhotoViewMIMETypes否可选择的媒体文件类型
maxSelectNumbernumber否选择媒体文件数量的最大值

PhotoViewMIMETypes

枚举，可选择的媒体文件类型

名称值说明
IMAGE_TYPE'image/*'图片类型
VIDEO_TYPE'video/*'视频类型
IMAGE_VIDEO_TYPE'/'图片和视频类型
MOVING_PHOTO_IMAGE_TYPE'image/movingPhoto'动态照片类型

PhotoViewPicker

图库选择器对象，用来支撑选择图片/视频等用户场景。在使用前，需要先创建PhotoViewPicker实例

selet

通过选择模式拉起photoPicker界面，用户可以选择一个或多个图片/视频。接口采用promise异步返回形式，传入可选参数PhotoSelectOptions对象，返回PhotoSelectResult对象

参数名类型必填说明
optionPhotoSelectOptions否photoPicker选择选项，若无此参数，则默认选择媒体文件类型为图片和视频类型，默认选择媒体文件数量的最大值为50

选择图片函数

/*
参数：
maxSelectNumber：可选照片最大数量
返回值：
返回所选择照片地址组成的字符串数组
*/
 async selectImage(maxSelectNumber: number) {
      //
      const opts = new photoAccessHelper.PhotoSelectOptions()
      //设置选择类型为图片
      opts.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
      //设置可选照片数量
      opts.maxSelectNumber = maxSelectNumber
      //实例化PhotoViewPicker对象
      const pickViewer = new photoAccessHelper.PhotoViewPicker()
      //拉起photoPicker界面
      let photos = await pickViewer.select(opts)
      //返回地址数组
      return photos.photoUris
    }

拷贝到缓存目录

导入模块 import { fileIo as fs } from '@kit.CoreFileKit' 链接入口

fs.openSync

以同步方法打开文件。支持使用URI打开文件

参数名类型必填说明
pathstring是打开文件的应用沙箱路径或URI，使用URI作为入参时，仅支持打开文件
modenumber否默认以只读方式打开，详细参照说明文档

OpenMode

open接口flags参数常量。文件打开标签

名称类型值说明
READ_ONLYnumber0o0只读打开。
WRITE_ONLYnumber0o1只写打开。
READ_WRITEnumber0o2读写打开。
CREATEnumber0o100若文件不存在，则创建文件。
TRUNCnumber0o1000如果文件存在且以只写或读写的方式打开文件，则将其长度裁剪为零。
APPENDnumber0o2000以追加方式打开，后续写将追加到文件末尾。
NONBLOCKnumber0o4000如果path指向FIFO、块特殊文件或字符特殊文件，则本次打开及后续 IO 进行非阻塞操作。
DIRnumber0o200000如果path不指向目录，则出错。
NOFOLLOWnumber0o400000如果path指向符号链接，则出错。
SYNCnumber0o4010000以同步IO的方式打开文件。

fs.copyFileSync

以同步方法复制文件

参数名类型必填说明
srcstringnumber是待复制文件的路径或待复制文件的文件描述符。
deststringnumber是目标文件路径或目标文件的文件描述符。
modenumber否mode提供覆盖文件的选项，当前仅支持0，且默认为0。
0：完全覆盖目标文件，未覆盖部分将被裁切掉。

拷贝图片函数

/*
参数：
photoUrl：图片地址
返回值；
返回文件名和文件类型组成的字符串数组
*/
async  copyImage(photoUrl: string) {
      //获取缓存目录路径
      let cacheDir = getContext().cacheDir
      let type = 'jpg'
      let filename = Date.now() + '.' + type
      let fullPath = cacheDir + '/' + filename
      //打开文件
      const file = fs.openSync(photoUrl, fs.OpenMode.READ_ONLY)
      //将图片拷贝到目标路径
      fs.copyFileSync(file.fd, fullPath)

      return [filename, type]
  }

上传图片

导入模块 import { request } from '@kit.BasicServicesKit' 链接入口

request.uploadFile

上传，异步方法，使用promise形式返回结果。通过on('complete'|'fail')可获取任务上传时的错误信息

参数：

参数名类型必填说明
contextBaseContext是基于应用程序的上下文
configUploadConfig是上传的配置信息

返回值：

类型说明
Promise<UploadTask>使用Promise方式，异步返回上传任务

UploadConfig

上传任务的配置信息

名称类型必填说明
urlstring是资源地址，其最大长度为2048个字符。
headerObject是添加要包含在上传请求中的HTTP或HTTPS标志头。
methodstring是HTTP请求方法：POST、PUT，缺省为POST。使用PUT修改资源，使用POST新增资源。
indexnumber否任务的路径索引，默认值为0。
beginsnumber否在上传开始时读取的文件起点。默认值为0，取值为闭区间。
endsnumber否在上传结束时读取的文件终点。默认值为-1，取值为闭区间。
filesArray<File>是要上传的文件列表。文件以 HTTP 的 multipart/form-data 格式提交。
dataArray<RequestData>是请求的表单数据

上传图片函数

/*
参数：
filename：上传文件名
fileType：上传文件类型
返回值：无
*/
async upload(filename: string, fileType: string) {
        let uploader = await request.uploadFile(getContext(), {
          url: '接口地址',
          method: '请求方法',
          header: {
            // 'Content-Type': 'multipart/form-data'
            contentType: 'multipart/form-data',
            Authorization: `Bearer ${token信息}`
          },
          files: [{
            filename: filename,
            type: fileType,
            name: '接口参数名',
            uri: `internal://cache/${filename}`
          }],
          data: []
        })
        // 3. 监控上传错误
        uploader.on('fail', err => {
          AlertDialog.show({message:JSON.stringify(err,null,2)})
        })
        //   4. 获取服务器返回来的数据
        uploader.on('headerReceive', async res => {
          AlertDialog.show({message:JSON.stringify(res,null,2)})
        })
  }
avatar
文章
阅读
粉丝