HarmonyOS 图片上传

图片上传前言一、HarmonyOS中图片上传的步骤二、具体上传步骤1. 选择图片2. 将图片拷贝至应用沙箱目录3. 发送请求上传图片总结前言在手机APP中图片上传功能为用户提供了便捷的方式来分享和传递视觉信息。无论是在社交媒体上分享旅行照片、美食体验还是在工作场合中提交项目进展报告、展示设计成果用户都能通过图片上传功能轻松实现。一、HarmonyOS中图片上传的步骤在鸿蒙系统中图片上传功能通过简单三步即可完成选择图片将图片拷贝至应用沙箱目录发请求上传图片二、具体上传步骤1. 选择图片选择图片需要用到 photoAccessHelper.Photoviewpicker 图库选择器对象用来支撑选择图片/视频等用户场景。在使用前需要先创建PhotoViewPicker实例。代码如下示例//1. 打开相册选择一张图 //选择图片的参数 const options new photoAccessHelper.PhotoSelectOptions() //指定文件类型是图片 options.MIMEType photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE //选择一张图 options.maxSelectNumber 1 //创建相册选择器 const picker new photoAccessHelper.PhotoViewPicker() //去选图片 const selectResult await picker.select(options) //取到选择图片的uri完整路径 const uri selectResult.photoUris[0]2. 将图片拷贝至应用沙箱目录代码如下示例// 以只读模式打开指定的文件通过传入的uri参数确定要打开的文件位置 const file fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY) // 构建一个新的文件路径存储拷贝后的文件 const filePath getContext(this).cacheDir / file.name // 将打开的文件同步的复制到新构建的文件路径 fileIo.copyFileSync(file.fd, filePath) // 关闭打开的文件释放资源 fileIo.closeSync(file.fd) // 创建一个新的FormData对象用于准备文件上传 这是axios上传图片需要的对象类型 FormData const formData new FormData() // 添加一个名字叫file的数据 数据需要 internal://cache/在沙箱目录的文件地址 formData.append(file, internal://cache/${file.name})如果想要压缩后再上传的话就需要这样写// 2. 相册中的图片需要压缩后上传 // 2.1 根据相册图片生成 ImageSource 对象 const originFile fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY) const imageSource image.createImageSource(originFile.fd) // 2.2 使用 packing 压缩图片二进制图片数据 const imagePacker image.createImagePacker() const arrayBuffer await imagePacker.packing(imageSource, { format: image/jpeg, quality: 70 }) // 2.3 存储到沙箱目录 const newFilePath getContext(this) .cacheDir / originFile.name const newFile fileIo.openSync(newFilePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE) fileIo.writeSync(newFile.fd, arrayBuffer) // 2.4 创建一个 formData const formData new FormData() formData.append(file,internal://cache/${newFile.name}) logger.debug(newFile, fileIo.statSync(newFile.fd).size.toString()) fileIo.closeSync(newFile.fd)3. 发送请求上传图片例如await http.requestnull({ url: userInfo/avatar, method: post, headers:{ Content-Type: multipart/form-data }, data: formData, context: getContext(this) }) // 上传成功更新头像 const user await http.requestUser({url: userInfo}) this.user.avatar user.avatar auth.setUser(this.user)总结引导用户选择一张系统相册的照片为图片选择器photoAccessHelper设置配置创建图片选择对象并选择图片以只读模式打开指定的文件通过传入的uri参数确定要打开的文件位置拷贝选择的图片到应用沙箱发送请求上传图片