HarmonyOS 鸿蒙Next 上传图库图片到服务器就这么简单

HarmonyOS 鸿蒙Next 上传图库图片到服务器就这么简单 前言

在学习上传图库图片到服务器前，先学习一下这篇帖子ArkTS(3.0与3.1)前端和SpringBoot后端文件上传示例(Request.upload)怎么上传文件到服务器的，然后看一下如何从图库选择图片文档 选择用户文件 有了这方面知识后，实现上传图库图片到服务器就是这么简单了。如图：

Screenshot_20230623_210248_com.army.study.jpg

知识点

PhotoViewPicker

图库选择器对象，用来支撑选择图片/视频和保存图片/视频等用户场景。在使用前，需要先创建PhotoViewPicker实例。

let photoPicker = new picker.PhotoViewPicker();

select

select(option?: PhotoSelectOptions) : Promise<PhotoSelectResult>

通过选择模式拉起photoPicker界面，用户可以选择一个或多个图片/视频。接口采用promise异步返回形式，传入可选参数PhotoSelectOptions对象，返回PhotoSelectResult对象。

参数：
参数名 类型 必填 说明
option PhotoSelectOptions 否 photoPicker选择选项，若无此参数，则默认选择媒体文件类型为图片和视频类型，选择媒体文件数量的最大值为50。
返回值：
类型 说明
Promise<PhotoSelectResult> Promise对象。返回photoPicker选择后的结果集
示例：
async function example() {
  try {
    let PhotoSelectOptions = new picker.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 5;
    let photoPicker = new picker.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
      console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
    }).catch((err) => {
      console.error('PhotoViewPicker.select failed with err: ' + err);
    });
  } catch (err) {
    console.error('PhotoViewPicker failed with err: ' + err);
  }
}

更多关于HarmonyOS 鸿蒙Next 上传图库图片到服务器就这么简单的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

楼主你好，我这个响应结果不是我预期内容

[{“path”:“upload01705053645387.jpg”,“responseCode”:0,“message”:“file uploaded successfully”}]

这结果是上传成功了吗？

但后台应该是返回一个图片的url的：dic[@“head_url”];

劳烦请教

更多关于HarmonyOS 鸿蒙Next 上传图库图片到服务器就这么简单的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


解决了，我也遇到过这个问题。

解决了吗，

基本信息

这是深色代码主题

这是正常代码

def hello_world():
    print("Hello, world!")

我也是返回的也不是服务器图片地址，

获取不到文件,文件路径是不是不对啊

你好，我按照你的示例做了一点改动，主要是打印一下上传过程：

try {
  request.uploadFile(context, uploadConfig)
    .then((uploadTask) => {
      uploadTask.on('complete', (taskStates) => {
        for (let i = 0; i < taskStates.length; i++) {
          Logger.info(TAG,`xx upload complete taskState: ${JSON.stringify(taskStates[i])}`);
        }
      });
      uploadTask.on('fail',(taskStates) => {
        for (let i = 0; i < taskStates.length; i++ ) {
          Logger.info(TAG,`xx upload failed taskState: ${JSON.stringify(taskStates[i])}`);
        }
      })
      uploadTask.on('progress',(uploadedSize, totalSize) => {
        Logger.info(TAG,"upload totalSize:" + totalSize + "  uploadedSize:" + uploadedSize);
      })
    })
    .catch((err) => {
      Logger.error(TAG,`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
    })
} catch (err) {
  Logger.error(TAG,`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
  //this.message = err.message
}

运行后，选择图片开始上传，貌似一切顺利，但最后出现错误：

…

09-06 17:12:30.213 12007-23968/com.hbwlifeadmin I 00001/pageUploadTest: [WEIPIN] [info] tag:pageUploadTest msg:upload totalSize:1628914 uploadedSize:1375974 09-06 17:12:30.214 12007-23968/com.hbwlifeadmin I 00001/pageUploadTest: [WEIPIN] [info] tag:pageUploadTest msg:upload totalSize:1628914 uploadedSize:1441510 09-06 17:12:31.221 12007-23968/com.hbwlifeadmin I 00001/pageUploadTest: [WEIPIN] [info] tag:pageUploadTest msg:upload totalSize:1628914 uploadedSize:1507046 09-06 17:12:31.223 12007-23968/com.hbwlifeadmin I 00001/pageUploadTest: [WEIPIN] [info] tag:pageUploadTest msg:upload totalSize:1628914 uploadedSize:1572582 09-06 17:12:31.224 12007-23968/com.hbwlifeadmin I 00001/pageUploadTest: [WEIPIN] [info] tag:pageUploadTest msg:upload totalSize:1628914 uploadedSize:1628914 09-06 17:12:31.318 12007-23968/com.hbwlifeadmin I 00001/pageUploadTest: [WEIPIN] [info] tag:pageUploadTest msg:xx upload failed taskState: {“path”:“test.jpg”,“responseCode”:5,“message”:“upload failed”}

看样子是文件都发出去了，最后捕捉到错误：{“path”:“test.jpg”,“responseCode”:5,“message”:“upload failed”}。而在服务器端，没有看到文件上传的请求。

这个 “responseCode”:5 不不知道是啥意思，文档中没找到。

烦请指点！

我也遇到这个问题，请问楼主解决了吗？

没呢，等api10再看看，

针对帖子标题“HarmonyOS 鸿蒙Next 上传图库图片到服务器就这么简单”的问题，以下是一个简洁的回答：

在HarmonyOS鸿蒙Next系统中，上传图库图片到服务器的过程可以通过以下步骤实现：

首先，确保你的应用已经获得了访问图库的权限。这通常需要在应用的权限设置中开启，或者在代码中动态请求权限。

接下来，使用HarmonyOS提供的API来访问图库。你可以通过文件选择器让用户选择要上传的图片，或者使用媒体存储API直接访问图库中的图片。

获取到图片文件后，你需要将其读取为字节流或Base64编码的字符串，以便通过HTTP请求上传到服务器。HarmonyOS提供了丰富的网络编程接口，你可以使用这些接口来发送POST请求，将图片数据作为请求体发送给服务器。

在发送请求时，请确保你已经设置了正确的请求头，包括Content-Type等，以便服务器能够正确解析你发送的图片数据。

服务器接收到图片数据后，通常会进行存储或进一步处理。你可以根据服务器的响应来判断上传是否成功。

如果在这个过程中遇到任何问题，比如权限申请失败、图片读取错误或网络请求失败等，请检查相关代码和日志，以确定问题所在。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部