# 鸿蒙开发上传图片(文件)到服务器

最新推荐文章于 2024-09-25 20:14:45 发布
最新推荐文章于 2024-09-25 20:14:45 发布
阅读量426 收藏 4
点赞数
文章标签： harmonyos 服务器 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57271017/article/details/142266448
版权

本文介绍的是如何将文件上传到服务器，这里将用上传图片作为示例。

上传图片首先我们得先从相册中拿到图片，这里就用到了photoAccessHelper模块(官方文档)

首先，我们先从相册中选择图片。

使用photoAccessHelper.PhotoViewPicker()来获取相册选择器对象，并通过对象中的select方法来选择图片。

select方法有两个返回值，其中photoUris是我们需要用到的。

名称类型可读可写说明
photoUrisArray是是返回图库选择后的媒体文件的uri数组，此uri数组只能通过临时授权的方式调用photoAccessHelper.getAssets接口去使用，具体使用方式参见用户文件uri介绍中的媒体文件uri的使用方式。
isOriginalPhotoboolean是是返回图库选择后的媒体文件是否为原图。
async selectImage(){
    let photoPicker = new photoAccessHelper.PhotoViewPicker()
	const res = await photoPicker.select({
        // 选择相册文件 的类型，这里为 IMAGE_TYPE 图片类型
      MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
        // 最多选几张
      maxSelectNumber: 3
    })
    AlertDialog.show({ message: JSON.stringify(res) })
}

拿到图片后，我们先把图片渲染到界面上

// 创建一个数组存uri ForEach渲染到UI上
interface ImageList {
  /** 图片url */
  url: string;
}
@State List: ImageList[] = []
// 将photoUris中的url通过map存到List里  [{ url: photoUris数组里的值 }]
this.List.push(...res.photoUris.map( url => {
    return { url } as ImageList
} ))
ForEach(this.List, (item: ImageList, i) => {
    Image(item.url)
	 .width(95)
     .height(95)
})

封装一个自定义弹窗，里边放上Swiper，将数组传进去，实现点击图片放大预览，并能左右滑动切换，完整代码：

import { photoAccessHelper } from '@kit.MediaLibraryKit'
interface ImageList {
  /** 图片url */
  url: string;
}
@Entry
@Component
struct Index {

@State List: ImageList[] = []
  index:number = 0
  diallor: CustomDialogController = new CustomDialogController({
    builder: HmPreview({urls: this.List , selectIndex: this.index}),
    customStyle: true
  })
  async selectImage(){
    let photoPicker = new photoAccessHelper.PhotoViewPicker()
    const res = await photoPicker.select({
      MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
      maxSelectNumber: 3
    })
    this.List.push(...res.photoUris.map( url => {
      return { url } as ImageList
    } ))
  }

  build() {
   Column(){
     Button('拉起相册')
       .onClick(() => {
          this.selectImage()
       })
     ForEach(this.List, (item: ImageList, i) => {
       Image(item.url)
         .width(95)
         .height(95)
         .onClick(() => {
           this.index = i
           this.diallor.open()
         })
     })
   }
    .height('100%')
    .width('100%')
  }
}

@CustomDialog
@Component
struct HmPreview {
  controller: CustomDialogController
  // 支持多张图片预览  给多张地址 给一个需要预览的索引
  urls: ImageList[] = [] // 多张地址
  selectIndex:number = -1 // 当前索引
  build() {
    Column() {
      Swiper() {
        ForEach(this.urls, (url: ImageList) => {
          Image(url.url)
            .width("100%") // 只给宽度 不给高度 让自己撑开
            .onClick(() => {
              this.controller.close()
            })
        })
      }
      .indicator(false) // 去掉点的显示
      .index(this.selectIndex) // 当前要看的是第几张图片

    }
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

因为上传文件只能从沙箱文件中拷贝，所以接下来封装一个API将传进来的图片拷贝到沙箱里。

获取与页面上下文组件关联的Context对象，并使用里边的cacheDir方法获取应用文件路径。

//list: ImageList[] 为传进来的
export const UploadFile = async (list: ImageList[]) => {
  const saveDir = getContext().cacheDir // 存储在沙箱的目录
  const fileParams: request.File[] = [] // 需要提交的参数
}

使用fileIo相册管理器中的openSync方法，打开并读取相册文件，将获取到的图片url传进方法里，返回一个File对象，其中的fd是图片文件的描述符（打开的文件描述符）我们需要传到copyFileSync（以同步方法复制文件）方法里。

之后添加到提交参数里，添加完后将文件关闭。

  list.forEach((item) => {
    // 读取相册文件
    const file = fileIo.openSync(item.url, fileIo.OpenMode.READ_ONLY)
    // 将文件拷贝到沙箱目录
    // 相册地址  使用UUID作为图片名
    const uniqueName = util.generateRandomUUID() + '.jpg'
    // 将相册文件拷贝到沙箱
    fileIo.copyFileSync(file.fd, saveDir + '/' + uniqueName)
    fileParams.push({
      filename: uniqueName, // 文件名称
      name: 'file', // 接口的参数名
      type: 'jpg', // 文件后缀
      uri: `internal://cache/${uniqueName}`// 应该是文件放到cache目录下 如果是cache协议 它会自动找这个文件
    })
    // 拷贝完关闭文件
    fileIo.closeSync(file.fd)
  })

完整代码：

// 将图片拷贝到沙箱目录
export const UploadFile = async (list: ImageList[]) => {
  // 因为上传文件只能从沙箱文件中拷贝，所以我们需要把传过来的所有图片拷贝到沙箱中
  const saveDir = getContext().cacheDir // 存储在沙箱的目录
  const fileParams: request.File[] = [] // 需要提交的参数
  list.forEach((item) => {
    // 读取相册文件  打开的File对象。
    const file = fileIo.openSync(item.url, fileIo.OpenMode.READ_ONLY)
    // 将文件拷贝到沙箱目录
    // 相册地址   使用UUID作为图片名
    const uniqueName = util.generateRandomUUID() + '.jpg'
    // 将相册文件拷贝到沙箱
    fileIo.copyFileSync(file.fd, saveDir + '/' + uniqueName)
    fileParams.push({
      filename: uniqueName, // 文件名称
      name: 'file', // 接口的参数名
      type: 'jpg', // 文件后缀
      uri: `internal://cache/${uniqueName}`// 应该是文件放到cache目录下 如果是cache协议 它会自动找这个文件
    })
    // 拷贝完关闭文件
    fileIo.closeSync(file.fd)
  })
  AlertDialog.show({ message: JSON.stringify(fileParams) })
}

接下来封装一个上传请求的API，将图片提交到服务器。

这个API需要两个参数，一个是应用上下文，一个是要上传的文件列表(官方文档)。

定义API将上传任务的配置信息配置一下(官方文档)

export const uploadImage = async (context: Context, files: request.File[]) => {
  let config: request.UploadConfig = {
    url:  '服务器地址', 
    method: 'POST',// 请求类型
    header: {
      Authorization: AppStorage.get(TOKEN_KEY) || "", // 应用中的token
      "Content-Type": "multipart/form-data" // 上传文件的参数类型
      // multipart/form-data  专门传文件的结构
    },
    files,
    data: [] // 批量上传需要携带的参数 用不上
  }
}

上传文件不一定会上传成功，也可能会上传失败，我们使用Promise管理一下成功状态和失败状态。 返回一个数组url，以便供其它接口使用。

return new Promise<ImageList[]>(async (resolve, reject) => {
      let arr: ImageList[] = []
      // 使用Promise方式，异步返回上传任务。 可通过 on方法订阅事件，获取任务状态
      const task = await request.uploadFile(context, config) // 成功执行并不意味着 上传成功 只是任务创建成功
})

订阅事件获取任务状态

      //订阅的事件类型，取值为'complete'，表示上传任务完成；取值为'fail'，表示上传任务失败
	task.on("fail", () => {
        // 上传失败
        AlertDialog.show({
          message: "上传失败"
        })
        reject(new Error("上传失败"))
      })
      // 每上传成功一次就会进来
      task.on("headerReceive", (headers: object) => {
          // 响应回来的数据
        if (headers["body"]) {
            // 转换为对象形式
          const result = JSON.parse(headers["body"]) as ResponseData<string>
            // result.code === 200为成功时的状态码
          if (result.code === 200) {
            arr.push({
              url: result.data as string
            })
          }
        }
      })
	 //订阅的事件类型，取值为'complete'，表示上传任务完成；取值为'fail'，表示上传任务失败
      task.on("complete", () => {
        // 上传完成
        // 也不能拿到上传成功的地址
        // 走到这里认为 要返回的结构已经ok了
        resolve(arr)
      })

到这里，上传图片基本完成的差不多了，接着我们需要用try捕获上传时出现的一些错误

try{
      //订阅的事件类型，取值为'complete'，表示上传任务完成；取值为'fail'，表示上传任务失败
	task.on("fail", () => {
        // 上传失败
        AlertDialog.show({
          message: "上传失败"
        })
        reject(new Error("上传失败"))
      })
      // 每上传成功一次就会进来
      task.on("headerReceive", (headers: object) => {
          // 响应回来的数据
        if (headers["body"]) {
            // 转换为对象形式
          const result = JSON.parse(headers["body"]) as ResponseData<string>
            // result.code === 200为成功时的状态码
          if (result.code === 200) {
            arr.push({
              url: result.data as string
            })
          }
        }
      })
	 //订阅的事件类型，取值为'complete'，表示上传任务完成；取值为'fail'，表示上传任务失败
      task.on("complete", () => {
        // 上传完成
        // 也不能拿到上传成功的地址
        // 走到这里认为 要返回的结构已经ok了
        resolve(arr)
      })
}catch(error) {
      AlertDialog.show({
        message: error.message // 提示错误消息
      })
      reject(error)
    }

上传请求API完整代码：

export const uploadImage = async (context: Context, files: request.File[]) => {
  let config: request.UploadConfig = {
    url:  '服务器地址', 
    method: 'POST',// 请求类型
    header: {
      Authorization: AppStorage.get(TOKEN_KEY) || "", // 应用中的token
      "Content-Type": "multipart/form-data" // 上传文件的参数类型
      // multipart/form-data  专门传文件的结构
    },
    files,
    data: [] // 批量上传需要携带的参数 用不上
  }
  
  return new Promise<ImageList[]>(async (resolve, reject) => {
      let arr: ImageList[] = []
      // 使用Promise方式，异步返回上传任务。 可通过 on方法订阅事件，获取任务状态
      const task = await request.uploadFile(context, config) // 成功执行并不意味着 上传成功 只是任务创建成功
      
      try{
      //订阅的事件类型，取值为'complete'，表示上传任务完成；取值为'fail'，表示上传任务失败
	task.on("fail", () => {
        // 上传失败
        AlertDialog.show({
          message: "上传失败"
        })
        reject(new Error("上传失败"))
      })
      // 每上传成功一次就会进来
      task.on("headerReceive", (headers: object) => {
          // 响应回来的数据
        if (headers["body"]) {
            // 转换为对象形式
          const result = JSON.parse(headers["body"]) as ResponseData<string>
            // result.code === 200为成功时的状态码
          if (result.code === 200) {
            arr.push({
              url: result.data as string
            })
          }
        }
      })
	 //订阅的事件类型，取值为'complete'，表示上传任务完成；取值为'fail'，表示上传任务失败
      task.on("complete", () => {
        // 上传完成
        // 也不能拿到上传成功的地址
        // 走到这里认为 要返回的结构已经ok了
        resolve(arr)
      })
}catch(error) {
      AlertDialog.show({
        message: error.message // 提示错误消息
      })
      reject(error)
    }
})
  
}

最后我们将上传请求API放到拷贝沙箱API里

// 将图片拷贝到沙箱目录
export const UploadFile = async (list: ImageList[]) => {
  // 因为上传文件只能从沙箱文件中拷贝，所以我们需要把传过来的所有图片拷贝到沙箱中
  const saveDir = getContext().cacheDir // 存储在沙箱的目录
  const fileParams: request.File[] = [] // 需要提交的参数
  list.forEach((item) => {
    // 读取相册文件  打开的File对象。
    const file = fileIo.openSync(item.url, fileIo.OpenMode.READ_ONLY)
    // 将文件拷贝到沙箱目录
    // 相册地址   使用UUID作为图片名
    const uniqueName = util.generateRandomUUID() + '.jpg'
    // 将相册文件拷贝到沙箱
    fileIo.copyFileSync(file.fd, saveDir + '/' + uniqueName)
    fileParams.push({
      filename: uniqueName, // 文件名称
      name: 'file', // 接口的参数名
      type: 'jpg', // 文件后缀
      uri: `internal://cache/${uniqueName}`// 应该是文件放到cache目录下 如果是cache协议 它会自动找这个文件
    })
    // 拷贝完关闭文件
    fileIo.closeSync(file.fd)
  })
  // AlertDialog.show({ message: JSON.stringify(fileParams) })
    return await uploadImage(getContext(), fileParams)
}

有不足之处欢迎大家指点。

周星0927
关注
鸿蒙应用开发-选择图库照片上传至服务器（request.uploadFile（））
weixin_48952056的博客
05-07 4610
在鸿蒙系统开发中实现从选择图片到上传图片，并增加了进度监控功能。在实现时应注意文件类型的正确性、文件命名的唯一性、网络请求的安全性。
鸿蒙从相册选择图片上传到服务器
wobuxiangquming的博客
06-03 490
从相册选择图片上传到服务器
【鸿蒙】- HarmonyOS Next中实现图片上传
qq_45774739的博客
06-11 3271
在手机APP中，图片上传功能为用户提供了便捷的方式来分享和传递视觉信息。无论是在社交媒体上分享旅行照片、美食体验，还是在工作场合中提交项目进展报告、展示设计成果，用户都能通过图片上传功能轻松实现。
鸿蒙数据上传三步走——以图片上传为例
weixin_48091641的博客
05-10 2648
鸿蒙战略胜利，目前鸿蒙开发是一个急需要人才的缺口，在未来几年势必会有大量的鸿蒙岗位出现，目前所存在的鸿蒙岗位也是给出了相当高的薪资。事实证明，鸿蒙开发确实是一块香饽饽。作为华为自家的操作系统，正在逐步扩张市场份额。想要转行或者入行的朋友可以下手了。在这里，为大家提供一份我整理的鸿蒙开发学习资料，涵盖了UI开发、web、应用模型多个知识点，有需要的朋友可以扫描下方二维码，免费获取更多相关资料。
鸿蒙NEXT开发【后台合理使用上传下载】后台任务功耗优化
最新发布
ADgai1987的博客
09-25 272
应用需要上传下载时，应使用系统上传下载服务，不要申请长时任务。
HarmonyOS 图片上传
hhhhhh5666的博客
09-10 841
在手机APP中，图片上传功能为用户提供了便捷的方式来分享和传递视觉信息。引导用户选择一张系统相册的照片，为图片选择器photoAccessHelper设置配置，创建图片选择对象并选择图片以只读模式打开指定的文件，通过传入的uri参数确定要打开的文件位置，拷贝选择的图片到应用沙箱发送请求，上传图片。
HarmonyOS云开发基础认证自刷题库
09-13
【 HarmonyOS 云开发基础认证自刷题库详解】 在当今的互联网技术发展潮流中，华为推出的HarmonyOS操作系统以其跨平台、分布式的特点受到了广泛关注。为了帮助开发者更好地掌握HarmonyOS的云开发技能，官方提供了...
HarmonyOS JS实现图片上传后端并调用
LQB001的博客
11-17 2225
harmonyOS应用
基于最新鸿蒙OS开发的高仿微信APP
04-10
总之，基于鸿蒙OS开发高仿微信APP是一个综合性的任务，涉及到UI设计、网络编程、多媒体处理等多个方面。通过熟练掌握HarmonyOS的开发工具和API，我们可以构建出一款功能丰富、用户体验优秀的应用。尽管存在挑战，但...
鸿蒙应用开发系列 EX篇：HarmonyOS应用开发者高级认证
生活在别处
05-06 946
通过该认证的开发者，不仅能够证明自己在HarmonyOS平台上的专业水平，还有机会获得华为官方的认可和支持，比如市场推广资源、技术支持优先权等，有助于提升个人职业竞争力或企业的业务发展。在Column和Row容器组件中，alignItems用于设置子组件在主轴方向上的对齐格式，justifyContent用于设置子组件在交叉轴方向上的对齐格式。E.属性方法：用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color()
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5440
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
axios上传图片
qq_30236067的博客
09-21 3304
const file = e.target.files[0]; const fd = new FormData(); fd.append('file', file); axios.defaults.withCredentials = true axios({ method: 'post', headers: { 'Conten...
axios：图片上传
听海边涛声
07-11 459
axios：图片上传
使用axios上传照片
热门推荐
马优晨
08-07 1万+
原来使用vue1.0的时候，我们一直使用ajax来发送请求，当接触新的项目的时候，我们使用了vue2.0,结合着使用了axios来代替ajax。安装axios的话：1-利用npm安装npm install axios –save2、 利用bower安装bower install axios –save3、 直接利用cdn引入<script src="https://unpkg.com/axios/d
HarmonyOS Axios封装网络请求\文件上传
m0_66174481的博客
08-22 298
基于Promise封装请求库。
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现（五）
pixle的博客
06-11 3020
HarmonyOS Next（基于API11）实现从手机选择图片或拍照上传功能，常用于头像上传等操作
HarmonyOS 开发-图片九宫格封装案例
1
04-09 1153
本示例介绍使用(Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。
网络组件axios可以在OpenHarmony上使用了
OpenHarmony_dev的博客
08-29 1704
简单来说，ohos/axios依赖开源社区axios三方组件，并根据axios现有的框架实现了ohadapter，即在OpenHarmony中适配网络调用，对外暴露axios的原有对象，因此可以保障axios的api及特性都完全继承。我们可以看到axios既可以在浏览器中使用，又可以在Nodejs中使用，而如今随着OpenHarmony ArkUI的发展，axios又有了新的用武之地，即在OpenHarmony标准系统的应用中使用：可用于网络请求和上传下载文件，并完全继承axios原生的用法和所有特性。..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值