HarmonyOS 鸿蒙Next图库选择图片上传案例

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next图库选择图片上传案例

我在开发图库选择图片上传的功能时，在得到文件路径后使用fs模块拷贝到沙盒中进行上传，然后到

fs.openSync(options.filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);

这里就行不通了，无法将文件读取到复制进沙盒中，大家处理该场景时有遇到这个问题吗？


更多关于HarmonyOS 鸿蒙Next图库选择图片上传案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参考demo：

import { BusinessError } from '[@ohos](/user/ohos).base';
import { rcp } from '[@kit](/user/kit).RemoteCommunicationKit';
import { picker } from '[@kit](/user/kit).CoreFileKit';
import fs from '[@ohos](/user/ohos).file.fs';
import { http } from '[@kit](/user/kit).NetworkKit';
let uploadUrl: string = 'http://192.168.62.4:8080/upload';

function example01(): string {
 let uri = '';
 let photoViewPicker = new picker.PhotoViewPicker();
 let photoSelectOption = new picker.PhotoSelectOptions();
 photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
 photoViewPicker.select(photoSelectOption).then((photoSelectResult) => {
   console.log("fyh photoSelectResult:" + photoSelectResult);
   uri = photoSelectResult.photoUris[0];
   console.log("fyh uri:" + uri);
   try {
     let resultPhoto = fs.openSync(uri,fs.OpenMode.READ_ONLY);
     let resultName = resultPhoto.name;
     let fileTemp = fs.openSync(getContext().filesDir+resultPhoto.name,fs.OpenMode.READ_WRITE|fs.OpenMode.CREATE);
     let imageUri = fileTemp.path;
     fs.copyFileSync(resultPhoto.fd,fileTemp.fd);
     fs.closeSync(resultPhoto);
     fs.closeSync(fileTemp);
     const httpRequest = http.createHttp();
     httpRequest.request(uploadUrl,{
       method:http.RequestMethod.POST,
       header:{
         'Content-Type': 'multipart/form-data',
         'Connection':'keep-alive'
       },
       expectDataType:http.HttpDataType.ARRAY_BUFFER,
       multiFormDataList: [
         {
           name:'file',
           contentType: 'image/jpg',
           filePath: imageUri,
           remoteFileName:'file.jpg'
         },
       ],
     },(err,data) => {
       console.log('fyh:上传结束')
       httpRequest.destroy();
     }
     )
   } catch (err) {
     console.error(`fyh:Failed to request the upload. err: ${JSON.stringify(err)}`);
   }

 }).catch((err:BusinessError) => {
   console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
 })
 return uri;
}
function testRcpMultiPartUpload() {
 example01();
}
function clickget() {
 const session = rcp.createSession();
 session.get("http://192.168.62.4:8080/getText").then((response) => {
   console.log("fyh"+JSON.stringify(response));
 }).catch((err: BusinessError) => {
   console.error("err:" + JSON.stringify(err));
 });
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@State](/user/State) message: string = 'Hello World';

 build() {
   Row() {
     Column() {
       Text(this.message)
         .fontSize(50)
         .fontWeight(FontWeight.Bold)
         .onClick(() => {
           testRcpMultiPartUpload();
         })
       Text('getText')
         .fontSize(50)
         .fontWeight(FontWeight.Bold)
         .onClick(() => {
           clickget();
         })

     }
     .width('100%')
   }
   .height('100%')
 }
}

更多关于HarmonyOS 鸿蒙Next图库选择图片上传案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，实现图库选择图片并上传的功能，可以通过以下步骤进行：

  1. 权限声明：在config.json文件中声明必要的权限，如读取存储权限（ohos.permission.READ_MEDIA）和写入存储权限（ohos.permission.WRITE_MEDIA）。

  2. 启动图库选择器：使用Intent启动系统图库选择器，允许用户选择图片。例如，通过Intent.ACTION_PICK动作来启动选择器，并设置数据类型为image/*。

  3. 获取图片URI：在图库选择器返回后，通过onActivityResult方法获取用户选择的图片URI。

  4. 读取图片数据：使用MediaStore或ContentProvider读取图片数据，可以转换为Bitmap或直接读取为字节流。

  5. 上传图片：根据需求，将读取到的图片数据通过HTTP请求或其他网络协议上传至服务器。

示例代码片段（省略了具体实现细节）：

// 假设在Activity中
Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
intent.setType("image/*");
startActivityForResult(intent, REQUEST_CODE_PICK_IMAGE);

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == REQUEST_CODE_PICK_IMAGE && resultCode == RESULT_OK && data != null) {
        Uri imageUri = data.getData();
        // 处理图片URI，读取并上传
    }
}

注意：以上代码仅为逻辑框架，具体实现需根据HarmonyOS API文档调整。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部