上传图片 HarmonyOS 鸿蒙Next

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

上传图片 HarmonyOS 鸿蒙Next

如何使用http的multipart/form-data表单的形式上传图片,可以提供一个示例吗?

2 回复
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';
import request from '@ohos.request';

// 使用装饰器定义页面组件
@Entry
@Component
struct Index {
  @State imageList: Array<string> = []
  // 状态变量:原始图片的URI
  @State imgOriginal: string = '';
  @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://10.255.11.12:7000/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();
      });
     

      Image(this.imgOriginal)
        .width('100%')
        .objectFit(ImageFit.Contain);
      Button('上传图片').onClick(() => {
        this.upPicker();
      });
    }
    .width('100%'); 
  }
}

uri: internal://cache/${this.uploadFileName}, type: ‘jpg’

header: { ‘Accept’: ‘/’, ‘Content-Type’: ‘multipart/form-data’, },这块换成这样的

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


针对您提到的“上传图片到HarmonyOS 鸿蒙Next”的问题,这里提供一些可能的解决方案概述,旨在帮助您理解基本操作步骤及潜在的问题解决方向:

  1. 检查应用权限:确保您的应用已授予访问存储和相机(如果涉及拍照上传)的权限。在鸿蒙系统中,这些权限通常在应用的“设置”或系统的“权限管理”中管理。

  2. 使用官方API:如果您是开发者,利用鸿蒙系统提供的MediaStore API或相关文件操作API来实现图片上传功能,确保代码符合鸿蒙系统的开发规范。

  3. 文件格式与大小限制:检查上传平台对图片格式(如JPEG, PNG)和文件大小是否有特定要求,确保图片符合这些标准。

  4. 网络状态:确认设备网络连接稳定,上传图片需要良好的网络条件。

  5. 系统更新:确保您的鸿蒙系统为最新版本,有时系统更新能解决兼容性问题。

  6. 错误日志分析:如果上传失败,查看应用或系统的错误日志,可能会提供失败原因的线索。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。希望这些信息对您有所帮助!

回到顶部