鸿蒙HarmonyOS NEXT开发：鸿蒙应用中图片上传流程剖析，从图库中、用户照相
一、总体流程概述无论采用哪种方式上传图片，都需要先把用户选择的图片放到应用的沙箱中，再进行上传操作。不同方式的主要区别在于选择照片的情势。
二、不同方式选择照片
（一）照相拿取照片
代码实现
const pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(this),
, {
cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
});
if(pickerResult.code === -1) return
const uri = pickerResult.resultUri 参数解释
[*]参数 1：上下文（getContext(this)）
[*]参数 2：拍摄类型（照相、照相），以数组情势传入，这里选择了照相（cameraPicker.PickerMediaType.PHOTO）
[*]参数 3：设置信息，包括摄像头位置（这里选择后摄camera.CameraPosition.CAMERA_POSITION_BACK）
照相竣事后，从pickerResult对象中获取相关信息：
[*]resultUri：照片路径
[*]code：成功与否的标志，0表现成功，-1表现失败
（二）图库拿取照片
代码实现
// 先创建照片选择器
const options = new photoAccessHelper.PhotoViewPicker()
// 打开图库选择
const photo = await options.select({MIMEType:photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, maxSelectNumber:1})
// 返回一个数组，无长度则代表没选
if(photo.photoUris.length==0) return
const uri = photo.photoUris 步调解释
[*]首先创建照片选择器（new photoAccessHelper.PhotoViewPicker()）
[*]然后通过select方法打开图库选择，传入选择照片设置，包括限制选择图片类型（photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE）和最多选择数目（maxSelectNumber:1）
[*]从返回结果photo中获取选择的照片路径，如果返回数组长度为 0，则表现没有选择照片
三、图片上传流程
（一）用只读模式打开，拿到文件形貌
const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY) （二）将图片放入沙箱中
需要压缩图片的环境
[*]拿到图片源
const imageSource = image.createImageSource(file.fd)
[*]创建打包器并开始打包
const imagePacker = image.createImagePacker()
const arrayBuffer = await imagePacker.packing (imageSource, {format: 'image/jpeg', quality: 70}); 这里将图片打包成jpeg格式，压缩质量为70（100为无压缩）
[*]构建沙箱目次文件路径并写入数据
const newFilePath = `${getContext(this).cacheDir}/${file.name}`;
const newFile = fileIo.openSync(newFilePath,
fileIo.OpenMode.READ_WRITE |fileIo.OpenMode.CREATE);
fileIo.writeSync(newFile.fd, arrayBuffer); 不需要压缩图片的环境
直接将图片拷贝到沙箱。参数1为文件形貌符，参数2为沙箱目次文件路径。
fileIo.copyFileSync( file.fd，`${getContext(this).cacheDir}/${file.name}`) 此时已经将图片文件拷贝到沙箱中。
（三）调用接口上传
使用request.uploadFile上传
[*]上传代码
const task = await request.uploadFile(context, {
// 后端请求地址
url: 'xxxxxxx'
// 请求头信息 类型、token......
header: {
'content - type': 'multipart/form - data',
Authorization: `xxxx`
},
// 请求类型
method: http.RequestMethod.POST,
// 图片信息
files: [{
// 上传给后端的名字
filename: `${file.name}`,
// 沙箱路径
uri: `internal://cache/${file.name}`,
// 和后端Body一致
name: 'file',
// 照片类型（后缀）
type: `${file.name.split('.')}`
}],
// 请求的表单数据
data: []
})
[*]监听结果
task.on('fail', () => {
AlertDialog.show({ message: '上传失败' })
})
task.on('complete', async () => {
AlertDialog.show({ message: '上传成功' })
})
task.on('progress', (async (uploadedSize: number, totalSize: number) => {
promptAction.showToast({message:上传进度：(uploadedSize/totalSize*100).toFixed(2)+' %'})
})) 使用axios上传
[*]创建FormData对象并添加数据
const formData = new FormData();
formData.append('file', `internal://cache/${file.name}`);
[*]上传代码
const res =await axiosRequest({
url:'xxxxx',
data:formData,
method:'post',
context:getContext(this),
headers:{"Content - Type":'multipart/form - data'},
onUploadProgress:(event)=>{ //上传进度
event.loaded // 当前
event.total // 总 }
}) （四）上传完成释放相关资源
fileIo.close(file.fd)
fileIo.close(newFile.fd) 通过以上步调，我们可以在鸿蒙应用中实现完整的图片上传功能，无论是照相上传、用户操作上传照旧从图库中上传，都可以遵照这一流程来确保图片能够安全、高效地传输到后端服务器。
完整流程图
https://i-blog.csdnimg.cn/direct/2ca38edb0ece424ba5f9879481bbf52f.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]