【鸿蒙】- HarmonyOS Next中实现图片上传

媒介

在手机APP中，图片上传功能为用户提供了便捷的方式来分享和通报视觉信息。无论是在社交媒体上分享旅行照片、美食体验，还是在工作场合中提交项目进展报告、展示设计结果，用户都能通过图片上传功能轻松实现。这一功能的实现，不仅满意了用户对于信息分享和通报的需求，还使用户可以更加直观地表达自己的想法和感受，与他人举行更加丰富的交流。

实现步调

在鸿蒙系统中，图片上传功能通过简朴三步即可完成：首先选择图片，随后将图片拷贝至缓存目次，最后实行上传操作。接下来就让我们一起来看看详细如何实现的吧。

选择相册图片

因为选择图片需要用到 picker,接下来让简朴先容一下Picker。
选择器(Picker)是一个封装PhotoViewPicker、DocumentViewPicker、AudioViewPicker等API模块，具有选择与生存的本领。应用可以自行选择使用哪种API实现文件选择和文件生存的功能。此中我们主要使用的是PhotoViewPicker。
PhotoViewPicker（图库选择器对象），用来支持选择图片/视频和生存图片/视频等用户场景。
更多的详情请参考选择用户文件 (openharmony.cn)
详细的实现逻辑如下：

1. import picker from '@ohos.file.picker';
3. // 一、定义图片选择 Picker 的配置
4. // 实例化 选项对象
5. const photoSelectOptions = new picker.PhotoSelectOptions();
6. // 过滤选择媒体文件类型为IMAGE
7. photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
8. // 选择媒体文件的最大数目
9. photoSelectOptions.maxSelectNumber = 1;
12. // 二、创建 图片选择对象并选择图片
13. const photoViewPicker = new picker.PhotoViewPicker();
14. // 调用 select 方法，传入选项对象
15. photoViewPicker.select(photoSelectOptions).then(res=>{
16.     const uri = res.photoUris[0]
17.     // 因为只选了一张
18.     AlertDialog.show({ message: '图片路径为:' + uri })
19. })

复制代码

拷贝图片到缓存目次

当前上传应用文件功能，不支持直接上传当地相册的文件，仅支持上传应用缓存文件路径（cacheDir）下的文件。
在使用上传功能前，需要先申请权限，即在module.json5设置文件的requestPermissionsrequestPermissions标签中声明权限。

1. "requestPermissions":[
2.       {
3.         "name" : "ohos.permission.INTERNET",
4.         "reason": "$string:reason",
5.         "usedScene": {
6.           "abilities": [
7.             "FormAbility"
8.           ],
9.           "when":"inuse"
10.         }
11.       }
12. ]

复制代码

接下来使用 fs 模块将上一步的文件，拷贝到 cacheDir 目次下。
fs模块为基础文件操作API，提供基础文件操作本领，包括文件基本管理、文件目次管理、文件信息统计、文件流式读写等常用功能。
更多的详情请参考@ohos.file.fs (文件管理) (openharmony.cn)

1. import fs from '@ohos.file.fs';
3. // 三.将文件保存到缓存目录(只能上传在缓存目录中的文件)
4. const context = getContext(this)
5. const fileType = 'jpg'
6. // 生成一个新的文件名
7. const fileName = Date.now() + '.' + fileType
8. // 通过缓存路径+文件名 拼接出完整的路径
9. const copyFilePath = context.cacheDir + '/' + fileName
10. // 将文件 拷贝到 临时目录
11. const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
12. fs.copyFileSync(file.fd, copyFilePath)

复制代码

上传文件

预备好参数调用request.uploadFile()得到上传对象 uploader
给uploader对象注册progress事件，监听上传进度 requestRes.on("progress", (uploadedSize: number, totalSize: number)=>{})

2. import request from '@ohos.request';
3. import http from '@ohos.net.http';
5.   // 四、上传图片
6.   // 上传文件
7.   let files: Array<request.File> = [
8.   // internal://cache/ 固定的
9.     { filename: fileName, type: fileType, name: 'img', uri: `internal://cache/${fileName}` }
10.   ]
12.   request.uploadFile(context, {
13.     url: '接口地址', // url 地址
14.     method: 请求方法, // 请求方法
15.     header: {
16.       // 和接口文档的要求的格式对象
17.       contentType: '',
18.     },
19.     files, // 文件信息
20.     data: [] // 额外提交的数据，不能省略
21.   })
22.     .then((res => {
23.       //获取到响应的内容
24.       res.on('headerReceive', (value) => {
25.         // 根据接口文档 转为对应的类型即可
26.         const uploadRes = (value as UploadResponse)
27.         const response = JSON.parse(uploadRes.body) as Response
28.         AlertDialog.show({
29.           message: response.data.url
30.         })
31.         console.log('上传的地址为:', response.data.url)
33.       })
34.     }))

复制代码

完备代码

1. import picker from '@ohos.file.picker';
2. import fs from '@ohos.file.fs';
3. import request from '@ohos.request';
4. import http from '@ohos.net.http';
6. // 定义类型
7. interface UploadResponse {
8.   body: string
9. }
11. export interface Response {
12.   /**
13.    * 业务状态码
14.    */
15.   code: number;
17.   /**
18.    * 响应数据
19.    */
20.   data: Data;
22.   /**
23.    * 响应消息
24.    */
25.   message: string;
26. }
28. /**
29. * 响应数据
30. */
31. export interface Data {
32.   /**
33.    * 上传成功的图片-在线地址
34.    */
35.   url: string;
36. }
39. // 实例化 选项对象
40. const photoSelectOptions = new picker.PhotoSelectOptions();
41. // 过滤选择媒体文件类型为IMAGE
42. photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
43. // 选择媒体文件的最大数目
44. photoSelectOptions.maxSelectNumber = 1;
46. @Entry
47. @Component
48. struct Page03_uploadImg {
49.   
50.   @State img :string =''
51.   
52.   build() {
53.     Navigation() {
55.       Column() {
57.         Image(this.img)
59.         Button('选择并上传图片')
60.           .onClick(() => {
61.             // 创建 图片选择对象
62.             const photoViewPicker = new picker.PhotoViewPicker();
63.             // 调用 select 方法，传入选项对象
64.             photoViewPicker.select(photoSelectOptions)
65.               .then(res => {
66.                 const uri = res.photoUris[0]
67.                 // 因为只选了一张
68.                 // AlertDialog.show({ message: '图片路径为:' + uri })
70.                 // 三、拷贝文件到缓存目录
71.                 // 将文件保存到缓存目录(只能上传在缓存目录中的文件)
72.                 const context = getContext(this)
73.                 const fileType = 'jpg'
74.                 // 生成一个新的文件名
75.                 const fileName = Date.now() + '.' + fileType
76.                 // 通过缓存路径+文件名 拼接出完整的路径
77.                 const copyFilePath = context.cacheDir + '/' + fileName
79.                 // 将文件 拷贝到 临时目录
80.                 const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
81.                 fs.copyFileSync(file.fd, copyFilePath)
83.                 // 四、上传图片
84.                 // 上传文件
85.                 let files: Array<request.File> = [
86.                 // internal://cache/ 固定的
87.                 // name 和接口文档的要求对上
88.                   { filename: fileName, type: fileType, name: 'img', uri: `internal://cache/${fileName}` }
89.                 ]
91.                 request.uploadFile(context, {
92.                   
93.                   url: '你的url 地址', // url 地址
94.                   
95.                   method: http.RequestMethod.POST, // 请求方法
96.                   header: {
97.                     // 和接口文档的要求的格式对象
98.                     contentType: 'multipart/form-data',
99.                   },
100.                   files, // 文件信息
101.                   data: [] // 额外提交的数据，不能省略
102.                 })
103.                   .then((res => {
104.                     // 获取响应的内容
105.                     res.on('headerReceive', (value) => {
106.                       const uploadRes = (value as UploadResponse)
107.                       const response = JSON.parse(uploadRes.body) as Response
108.                       AlertDialog.show({
109.                         message: response.data.url
110.                       })
111.                       this.img = response.data.url
112.                     })
113.                   }))
114.               })
115.           })
116.       }
117.     }
118.     .titleMode(NavigationTitleMode.Mini)
119.     .title('上传图片')
120.   }
121. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。