鸿蒙HarmonyOS NEXT开发：鸿蒙应用中图片上传流程剖析，从图库中、用户照相 ...

一、总体流程概述

无论采用哪种方式上传图片，都需要先把用户选择的图片放到应用的沙箱中，再进行上传操作。不同方式的主要区别在于选择照片的情势。
二、不同方式选择照片

（一）照相拿取照片

代码实现

1. const pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(this),
2. [cameraPicker.PickerMediaType.PHOTO], {
3. cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
4. });
5. if(pickerResult.code === -1) return
6. const uri = pickerResult.resultUri

复制代码

参数解释

• 参数 1：上下文（getContext(this)）
  
• 参数 2：拍摄类型（照相、照相），以数组情势传入，这里选择了照相（cameraPicker.PickerMediaType.PHOTO）
  
• 参数 3：设置信息，包括摄像头位置（这里选择后摄camera.CameraPosition.CAMERA_POSITION_BACK）
  

照相竣事后，从pickerResult对象中获取相关信息：

• resultUri：照片路径
  
• code：成功与否的标志，0表现成功，-1表现失败
  

（二）图库拿取照片

代码实现

1. // 先创建照片选择器
2. const options = new photoAccessHelper.PhotoViewPicker()
3. // 打开图库选择
4. const photo = await options.select({MIMEType:photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, maxSelectNumber:1})
5. // 返回一个数组，无长度则代表没选
6. if(photo.photoUris.length==0) return
7. const uri = photo.photoUris[0]

复制代码

步调解释

• 首先创建照片选择器（new photoAccessHelper.PhotoViewPicker()）
  
• 然后通过select方法打开图库选择，传入选择照片设置，包括限制选择图片类型（photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE）和最多选择数目（maxSelectNumber:1）
  
• 从返回结果photo中获取选择的照片路径，如果返回数组长度为 0，则表现没有选择照片
  

三、图片上传流程

（一）用只读模式打开，拿到文件形貌

1. const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)

复制代码

（二）将图片放入沙箱中

需要压缩图片的环境

• 拿到图片源
  

1. const imageSource = image.createImageSource(file.fd)

复制代码

• 创建打包器并开始打包
  

1. const imagePacker = image.createImagePacker()
2. const arrayBuffer = await imagePacker.packing (imageSource, {format: 'image/jpeg', quality: 70});

复制代码

这里将图片打包成jpeg格式，压缩质量为70（100为无压缩）

• 构建沙箱目次文件路径并写入数据
  

1. const newFilePath = `${getContext(this).cacheDir}/${file.name}`;
2. const newFile = fileIo.openSync(newFilePath,  
3. fileIo.OpenMode.READ_WRITE |  fileIo.OpenMode.CREATE);
4. fileIo.writeSync(newFile.fd, arrayBuffer);

复制代码

不需要压缩图片的环境

直接将图片拷贝到沙箱。参数1为文件形貌符，参数2为沙箱目次文件路径。

1. fileIo.copyFileSync( file.fd，`${getContext(this).cacheDir}/${file.name}`)

复制代码

此时已经将图片文件拷贝到沙箱中。
（三）调用接口上传

使用request.uploadFile上传

• 上传代码
  

1. const task = await request.uploadFile(context, {
2. // 后端请求地址
3.     url: 'xxxxxxx'
4. // 请求头信息 类型、token......
5.     header: {
6.       'content - type': 'multipart/form - data',
7.       Authorization: `xxxx`
8.     },
9. // 请求类型
10.     method: http.RequestMethod.POST,
11. // 图片信息
12.     files: [{
13. // 上传给后端的名字
14.       filename: `${file.name}`,
15. // 沙箱路径
16.       uri: `internal://cache/${file.name}`,
17. // 和后端Body一致
18.       name: 'file',
19. // 照片类型（后缀）
20.       type: `${file.name.split('.')[file.name.split('.').length - 1]}`
21.     }],
22. // 请求的表单数据
23.     data: []
24.   })

复制代码

• 监听结果
  

1. task.on('fail', () => {
2.   AlertDialog.show({ message: '上传失败' })
3. })
4. task.on('complete', async () => {
5.   AlertDialog.show({ message: '上传成功' })
6. })
7. task.on('progress', (async (uploadedSize: number, totalSize: number) => {
8. promptAction.showToast({message:上传进度：(uploadedSize/totalSize*100).toFixed(2)+' %'})
9. }))

复制代码

使用axios上传

• 创建FormData对象并添加数据
  

1. const formData = new FormData();
2. formData.append('file', `internal://cache/${file.name}`);

复制代码

• 上传代码
  

1. const res =  await axiosRequest({
2.       url:'xxxxx',
3.       data:formData,
4.       method:'post',
5.       context:getContext(this),
6.       headers:{"Content - Type":'multipart/form - data'},
7.       onUploadProgress:(event)=>{   //上传进度               
8.   event.loaded   // 当前
9.         event.total     // 总   }
10.     })

复制代码

（四）上传完成释放相关资源

1. fileIo.close(file.fd)
2. fileIo.close(newFile.fd)

复制代码

通过以上步调，我们可以在鸿蒙应用中实现完整的图片上传功能，无论是照相上传、用户操作上传照旧从图库中上传，都可以遵照这一流程来确保图片能够安全、高效地传输到后端服务器。


完整流程图

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