【鸿蒙】- HarmonyOS Next中实现图片上传

前言

在手机app中，图片上传功能为用户提供了便捷的方式来分享和传递视觉信息。无论是在社交媒体上分享旅行照片、美食体验，还是在工作场合中提交项目进展报告、展示设计成果，用户都能通过图片上传功能轻松实现。这一功能的实现，不仅满足了用户对于信息分享和传递的需求，还使用户可以更加直观地表达自己的想法和感受，与他人进行更加丰富的交流。

实现步骤

在鸿蒙系统中，图片上传功能通过简单三步即可完成：首先选择图片，随后将图片拷贝至缓存目录，最后执行上传操作。接下来就让我们一起来看看具体如何实现的吧。

选择相册图片

因为选择图片需要用到 picker,接下来让简单介绍一下picker。

选择器(picker)是一个封装photoviewpicker、documentviewpicker、audioviewpicker等api模块，具有选择与保存的能力。应用可以自行选择使用哪种api实现文件选择和文件保存的功能。其中我们主要使用的是photoviewpicker。

photoviewpicker（图库选择器对象），用来支撑选择图片/视频和保存图片/视频等用户场景。

更多的详情请参考选择用户文件 (openharmony.cn)

具体的实现逻辑如下：

import picker from '@ohos.file.picker';

// 一、定义图片选择 picker 的配置
// 实例化 选项对象
const photoselectoptions = new picker.photoselectoptions();
// 过滤选择媒体文件类型为image
photoselectoptions.mimetype = picker.photoviewmimetypes.image_type; 
// 选择媒体文件的最大数目
photoselectoptions.maxselectnumber = 1; 


// 二、创建 图片选择对象并选择图片
const photoviewpicker = new picker.photoviewpicker();
// 调用 select 方法，传入选项对象
 photoviewpicker.select(photoselectoptions).then(res=>{
    const uri = res.photouris[0]
    // 因为只选了一张
    alertdialog.show({ message: '图片路径为:' + uri })
 })

拷贝图片到缓存目录

当前上传应用文件功能，不支持直接上传本地相册的文件，仅支持上传应用缓存文件路径（cachedir）下的文件。

在使用上传功能前，需要先申请权限，即在module.json5配置文件的requestpermissionsrequestpermissions标签中声明权限。

 "requestpermissions":[
      {
        "name" : "ohos.permission.internet",
        "reason": "$string:reason",
        "usedscene": {
          "abilities": [
            "formability"
          ],
          "when":"inuse"
        }
      }
 ]

接下来使用 fs 模块将上一步的文件，拷贝到 cachedir 目录下。

fs模块为基础文件操作api，提供基础文件操作能力，包括文件基本管理、文件目录管理、文件信息统计、文件流式读写等常用功能。

更多的详情请参考@ohos.file.fs (文件管理) (openharmony.cn)

import fs from '@ohos.file.fs';

// 三.将文件保存到缓存目录(只能上传在缓存目录中的文件)
const context = getcontext(this)
const filetype = 'jpg'
// 生成一个新的文件名
const filename = date.now() + '.' + filetype
// 通过缓存路径+文件名 拼接出完整的路径
const copyfilepath = context.cachedir + '/' + filename
// 将文件 拷贝到 临时目录
const file = fs.opensync(uri, fs.openmode.read_only)
fs.copyfilesync(file.fd, copyfilepath)

上传文件

准备好参数调用request.uploadfile()获得上传对象 uploader

给uploader对象注册progress事件，监听上传进度 requestres.on("progress", (uploadedsize: number, totalsize: number)=>{})

import request from '@ohos.request';
import http from '@ohos.net.http';

  // 四、上传图片
  // 上传文件
  let files: array<request.file> = [
  // internal://cache/ 固定的
    { filename: filename, type: filetype, name: 'img', uri: `internal://cache/${filename}` }
  ]

  request.uploadfile(context, {
    url: '接口地址', // url 地址
    method: 请求方法, // 请求方法
    header: {
      // 和接口文档的要求的格式对象
      contenttype: '',
    },
    files, // 文件信息
    data: [] // 额外提交的数据，不能省略
  })
    .then((res => {
      //获取到响应的内容
      res.on('headerreceive', (value) => {
        // 根据接口文档 转为对应的类型即可
        const uploadres = (value as uploadresponse)
        const response = json.parse(uploadres.body) as response
        alertdialog.show({
          message: response.data.url
        })
        console.log('上传的地址为:', response.data.url)

      })
    }))

完整代码

import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import request from '@ohos.request';
import http from '@ohos.net.http';

// 定义类型
interface uploadresponse {
  body: string
}

export interface response {
  /**
   * 业务状态码
   */
  code: number;

  /**
   * 响应数据
   */
  data: data;

  /**
   * 响应消息
   */
  message: string;
}

/**
 * 响应数据
 */
export interface data {
  /**
   * 上传成功的图片-在线地址
   */
  url: string;
}


// 实例化 选项对象
const photoselectoptions = new picker.photoselectoptions();
// 过滤选择媒体文件类型为image
photoselectoptions.mimetype = picker.photoviewmimetypes.image_type;
// 选择媒体文件的最大数目
photoselectoptions.maxselectnumber = 1;

@entry
@component
struct page03_uploadimg {
  
  @state img :string =''
  
  build() {
    navigation() {

      column() {

        image(this.img)

        button('选择并上传图片')
          .onclick(() => {
            // 创建 图片选择对象
            const photoviewpicker = new picker.photoviewpicker();
            // 调用 select 方法，传入选项对象
            photoviewpicker.select(photoselectoptions)
              .then(res => {
                const uri = res.photouris[0]
                // 因为只选了一张
                // alertdialog.show({ message: '图片路径为:' + uri })

                // 三、拷贝文件到缓存目录
                // 将文件保存到缓存目录(只能上传在缓存目录中的文件)
                const context = getcontext(this)
                const filetype = 'jpg'
                // 生成一个新的文件名
                const filename = date.now() + '.' + filetype
                // 通过缓存路径+文件名 拼接出完整的路径
                const copyfilepath = context.cachedir + '/' + filename

                // 将文件 拷贝到 临时目录
                const file = fs.opensync(uri, fs.openmode.read_only)
                fs.copyfilesync(file.fd, copyfilepath)

                // 四、上传图片
                // 上传文件
                let files: array<request.file> = [
                // internal://cache/ 固定的
                // name 和接口文档的要求对上
                  { filename: filename, type: filetype, name: 'img', uri: `internal://cache/${filename}` }
                ]

                request.uploadfile(context, {
                  
                  url: '你的url 地址', // url 地址
                  
                  method: http.requestmethod.post, // 请求方法
                  header: {
                    // 和接口文档的要求的格式对象
                    contenttype: 'multipart/form-data',
                  },
                  files, // 文件信息
                  data: [] // 额外提交的数据，不能省略
                })
                  .then((res => {
                    // 获取响应的内容
                    res.on('headerreceive', (value) => {
                      const uploadres = (value as uploadresponse)
                      const response = json.parse(uploadres.body) as response
                      alertdialog.show({
                        message: response.data.url
                      })
                      this.img = response.data.url
                    })
                  }))
              })
          })
      }
    }
    .titlemode(navigationtitlemode.mini)
    .title('上传图片')
  }
}