鸿蒙开发实现图片上传(上传用户头像)

应用场景:


1. 选择图片

1.1. 添加图片到相册中

默认的相册中无法添加图片:windows 模拟器可以通过截图来添加图片

1.2. 选择相册图片

开发者可以通过系统预置的文件选择器(FilePicker),实现该能力。通过Picker访问相关文件,将拉起对应的应用,引导用户完成界面操作,接口本身无需申请权限。

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 })

})

2. 拷贝图片到缓存目录

当前上传应用文件功能,仅支持上传应用缓存文件路径(cacheDir)下的文件。

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

应用沙箱目录

使用 fs 模块将上一步的文件,拷贝到 cacheDir 目录下

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)

3. 上传文件

最后,根据接口要求咱们组装数据,并提交给服务器即可

import request from '@ohos.request';

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

  // 四、上传图片

  // 上传文件

  let files: Array<request.File> = [

  // internal://cache/ 固定的,后面跟上 咱们上一步拷贝文件名即可

  // 【name】 和接口文档的要求对上

    { 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) => {

        // body 是 JSON 是响应体

        // AlertDialog.show({

        //  message: JSON.stringify(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)

      })

    }))

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容