HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端,具体如下

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端,具体如下

通过拍照和选择相册方式选择图片后 将图片上传到服务端

问题1: 拍照 和 选择相册 其中的权限需要单独请求吗,现在我不进行权限的请求也可正常返回图片。

2. 选择图片后进行上传 报错:Failed to open/read local data from file/application

2 回复

normal等级的应用不想申请权限也可以通过临时授权的方式使用PhotoViewPicker.select接口得到的uri使用,图片上传到服务端可参考以下示例:

import picker from '[@ohos](/user/ohos).file.picker';

import fs from '[@ohos](/user/ohos).file.fs';

import { common } from '[@kit](/user/kit).AbilityKit';

import request from '[@ohos](/user/ohos).request';

// 使用装饰器定义页面组件

[@Entry](/user/Entry)

[@Component](/user/Component)

struct pothoPage {

 [@State](/user/State) imageList: Array<string> = []

 // 状态变量:原始图片的URI

 [@State](/user/State) imgOriginal: string = '';

 [@State](/user/State) filePath: string = '';

 uploadFileName: string = '';

 // 弹出图片选择器方法

 async openPicker() {

   try {

     // 设置图片选择器选项

     const photoSelectOptions = new picker.PhotoSelectOptions();

     // 限制只能选择一张图片

     photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;

     photoSelectOptions.maxSelectNumber = 10;

     // 创建并实例化图片选择器

     const photoViewPicker = new picker.PhotoViewPicker();

     // 选择图片并获取图片URI

     let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);

     if (!uris || uris.photoUris.length === 0) return;

     console.info('123123uris', JSON.stringify(uris))

     this.imageList = uris.photoUris

     // 获取选中图片的第一张URI

     let uri: string = uris.photoUris[0];

     // 更新状态变量:保存原始图片的URI

     this.imgOriginal = uri;

     // uris.photoUris.forEach(item =>{

     // 打开文件读取流

     let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);

     // 获取当前上下文

     let context = getContext(this) as common.UIAbilityContext;

     // 新建一个保存裁剪后图片的路径

     this.uploadFileName = new Date().getTime() + '.jpg';

     this.filePath = context.cacheDir + '/' + this.uploadFileName;

     // 复制图片到新的路径

     fs.copyFileSync(file.fd, this.filePath);

     // 关闭文件读取流

     fs.closeSync(file);

     console.info('123123filePath', JSON.stringify(this.filePath))

     // })

   } catch (e) {

     console.error('openPicker', JSON.stringify(e));

   }

 }

 //标准记事,资质证明文件,门到站站到门,运输信息(集装箱,整车)

 upPicker() {

   let uploadConfig: request.UploadConfig = {

     url: 'http://xxx/api/gxzx/file/uploadFile',

     header: {

       'Accept': '*/*',

       'Content-Type': 'multipart/form-data',

     },

     method: 'POST',

     files: [

       { filename: 'test', name: 'file', uri: `internal://cache/${this.uploadFileName}`, type: 'jpg' }

     ],

     data: []

   }

   console.log('uploadConfig', JSON.stringify(uploadConfig))

   try {

     request.uploadFile(getContext(), uploadConfig).then((data: request.UploadTask) => {

       console.log('123123', JSON.stringify(data))

       let uploadTask = data

       let upCompleteCallback = (taskStates:Array<request.TaskState>) =>{

         for (let index = 0; index < taskStates.length; index++) {

           console.info('upCompleteCallback',JSON.stringify(taskStates[index]))

         }

       }

       uploadTask.on('complete',upCompleteCallback)

       let upFailCallback = (taskStates:Array<request.TaskState>) =>{

         for (let index = 0; index < taskStates.length; index++) {

           console.info('upFailCallback',JSON.stringify(taskStates[index]))

         }

       }

       uploadTask.on('fail',upFailCallback)

     })

   } catch (err) {

     console.log('987err', JSON.stringify(err))

   }

 }

 // 构建UI界面

 build() {

   Column() {

     // 添加选择图片按钮,点击后调用打开图片选择器方法

     Button('选择图片→').onClick(() => {

       this.openPicker();

     });

     Row() {

       ForEach(this.imageList, (item: string) => {

         Image(item)

           .width('100%')

           .objectFit(ImageFit.Contain);

       })

     }.width('100%')

     Button('上传图片').onClick(() => {

       this.upPicker();

     });

   }

   .width('100%'); // 设置列宽度为100%

 }

}

更多关于HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端,具体如下的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,通过拍照和选择相册方式选择图片后,将图片上传到服务端的具体实现步骤如下:

  1. 拍照或选择图片

    • 使用MediaStore API访问设备媒体库,或者调用相机API进行拍照。
    • 获取图片URI或文件路径。
  2. 读取图片文件

    • 通过URI或路径,使用FileInputStream读取图片文件内容。
    • 将读取的内容转换成字节数组(byte[])。
  3. 图片上传到服务端

    • 使用HTTP或HTTPS协议,通过HttpURLConnectionOkHttp等网络库,构建POST请求。
    • 将字节数组作为请求体的一部分,设置合适的请求头(如Content-Type: image/jpeg)。
    • 发送请求到服务端,并处理响应结果。
  4. 错误处理

    • 捕获并处理文件读取、网络请求等过程中可能出现的异常。

示例代码(伪代码):

// 省略具体实现,因为要求不回答Java相关内容
// 但流程是:拍照/选图 -> 读取文件 -> 构建HTTP请求 -> 上传文件

注意,实际开发中需根据具体需求调整,如图片压缩、进度显示等。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部