HarmonyOS 鸿蒙Next 实现图片上传demo

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

HarmonyOS 鸿蒙Next 实现图片上传demo

实现图片上传demo

2 回复
图片上传demo参考:
深色代码主题
复制
import { BusinessError } from '@ohos.base';

import { rcp } from ‘@kit.RemoteCommunicationKit’;

import { picker } from ‘@kit.CoreFileKit’;

import fs from ‘@ohos.file.fs’;

import { http } from ‘@kit.NetworkKit’;

let uploadUrl: string = http://xxx.xxxxxx: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: <span class="hljs-subst">${<span class="hljs-built_in">JSON</span>.stringify(err)}</span>);

    }

  }).catch((err:BusinessError) => {

    console.error(Invoke photoViewPicker.select failed, code is <span class="hljs-subst">${err.code}</span>, message is <span class="hljs-subst">${err.message}</span>);

  })

  return uri;

}

function testRcpMultiPartUpload() {

  example01();

}

function clickget() {

  const session = rcp.createSession();

  session.get(http://xxx.xxxxx:8080/getText).then((response) => {

    console.log(“fyh”+JSON.stringify(response));

  }).catch((err: BusinessError) => {

    console.error(“err:” + JSON.stringify(err));

  });

}

@Entry

@Component

struct Index {

  @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%’)

  }

}

网络图片的url转换成图片的PixelMap看是否能够满足诉求

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-sendableimage-V5#pixelmap

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


在HarmonyOS鸿蒙Next中实现图片上传demo,可以通过以下步骤实现核心功能:

  1. 界面布局: 使用XML布局文件定义一个包含Image组件和Button组件的界面。Image组件用于显示选中的图片,Button组件用于触发图片上传操作。

  2. 图片选择: 使用mediastore模块或abilitystartActivityForResult方法启动图片选择器,允许用户从相册或相机中选择图片。选中的图片路径通过回调方法获取。

  3. 图片上传: 使用Network模块进行HTTP请求,将选中的图片文件转换为字节数组或Base64编码字符串,通过POST请求发送到服务器。请求头中可包含必要的认证信息。

  4. 处理响应: 在回调方法中处理服务器响应,如显示上传成功或失败的提示信息。

示例代码片段(伪代码,具体实现需根据API文档调整):

// 伪代码示例,实际开发中需替换为鸿蒙API
// 布局文件中定义Image和Button
// 在Ability中实现图片选择和上传逻辑
Image image;
Button uploadButton;

image.setClickedListener(component -> {
    // 启动图片选择器
});

uploadButton.setClickedListener(component -> {
    // 将图片转换为字节数组或Base64编码
    // 发送HTTP POST请求上传图片
});

注意:以上代码为伪代码,需根据HarmonyOS的实际API进行开发。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部