HarmonyOS 鸿蒙Next 将前端图片上传到后端

HarmonyOS 鸿蒙Next 将前端图片上传到后端

arkts前端上传图片到spring boot后端。

代码：

const file = fs.openSync(mediaBean.localUrl)
const fd = file?.fd
const imageSource = image.createImageSource(fd)
const imagePackerApi = image.createImagePacker();
let packOpts = { format:"image/jpeg", quality:98 };
imagePackerApi.packing(imageSource, packOpts).then( data => {
  const uint8Array = new Uint8Array(data)
  let base64Helper = new util.Base64Helper()
  this.background =  base64Helper.encodeToStringSync(uint8Array)
})

解释： mediaBean.localUrl为需要上传的图片的url。 由url打开文件，获取该文件的描述符，由文件描述符创建图片资源，创建ImagePacker实例（图片打包器类，用于图片压缩和打包），设置打包属性，用ImagePacker实例进行打包，将获取的打包后的图片类型先转化为Uint8Array，再用Base64Helper实例转化为String，简单来说就是将图片转化为base64编码的string字符串，再调用对应后端的api上传该string。

应该还有更简单的直接上传文件的方法，但是没有找到相关上传和加载的解决方案，希望赐教。

ps：编码后的图片的加载代码

Image("data:image/jpeg;base64," + 此处为上述图片转化为base64编码的string字符串)

更多关于HarmonyOS 鸿蒙Next 将前端图片上传到后端的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

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


在HarmonyOS（鸿蒙）Next中，前端图片上传到后端可以通过使用@ohos.request模块中的uploadFile方法实现。以下是一个简单的代码示例：

import request from '@ohos.request';

let filePath = '路径/到/图片文件.jpg'; // 替换为实际图片路径
let url = 'https://后端服务器地址/上传接口'; // 替换为实际后端接口地址

let options = {
  url: url,
  files: [
    {
      filename: 'image.jpg', // 文件名
      name: 'file', // 表单字段名
      uri: filePath, // 文件路径
      type: 'image/jpeg' // 文件类型
    }
  ],
  data: {
    // 其他表单数据
  },
  header: {
    // 请求头
  },
  method: 'POST'
};

request.uploadFile(options).then((response) => {
  console.log('上传成功:', response);
}).catch((error) => {
  console.error('上传失败:', error);
});

在这个示例中，uploadFile方法用于将图片文件上传到指定的后端服务器。files数组中的每个对象代表一个文件，包含文件名、表单字段名、文件路径和文件类型等信息。data对象用于传递其他表单数据，header对象用于设置请求头。

确保在config.json中配置了网络权限：

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

这样，前端图片就可以通过HTTP请求上传到后端服务器。

回到顶部