鸿蒙Next，图片上传01（扩展02截图保存到相册）-组件截图另通过沙箱保存到相册

​ 1. componentSnapShot 组件截图的get方法，得到 PixelMap 像素图像数据

@ohos.arkui.componentSnapshot (组件截图)-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

// 进行截图

const pixelMap = await componentSnapshot.get('share')

2.ImagePacker 打包 PixelMap 数据，转成二进制 ArrayBuffer 图片数据
// 图片数据
//ImagePacker 打包 PixelMap 数据

const imagePacker = image.createImagePacker()

//转成二进制 ArrayBuffer 图片数据
const arrayBuffer = await imagePackerApi.packToData(pixelMap, { format: "image/jpeg", quality: 98 })
3.ArrayBuffer 图片数据写入缓存目录，生成图片
○获取上下文
通过getContext获取上下文
const ctx = getContext(this)
○通过fileIo以 创建 或 读写 的方式打开文件

1.先拼好文件路径，代码如下
const imagePath = ctx.cacheDir + '/' + Date.now() + '.jpeg'
2.使用fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE，如何文件没有创建就创建，创建后以读写打开使用fileIo.openSync同步操作打开文件
const file = fileIo.openSync(imagePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
○通过fileIo同步把二进制数据写入文件

将我们之前获得的arrayBuffer二进制数据通过writeSync同步方法写入文件

fileIo.writeSync(file.fd, arrayBuffer)
○同步关闭文件

当我们对文件的操作结束后要关闭文件，懂得都懂，养成好习惯哦（使用closeSync同步关闭）

fileIo.closeSync(file.fd)

○提示用户保存成功

方法1：

  AlertDialog.show({message:'保存成功'})

方法2：

promptAction.showToast({ message: '保存成功' })

完整代码如下：

// 进行截图

const pixelMap = await componentSnapshot.get('share')

// 图片数据
//ImagePacker 打包 PixelMap 数据

const imagePacker = image.createImagePacker()

//转成二进制 ArrayBuffer 图片数据
const arrayBuffer = await imagePackerApi.packToData(pixelMap, { format: "image/jpeg", quality: 98 })
// 存储图片

const ctx = getContext(this)
const imagePath = ctx.cacheDir + '/' + Date.now() + '.jpeg'
const file = fileIo.openSync(imagePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
fileIo.writeSync(file.fd, arrayBuffer)
fileIo.closeSync(file.fd)
promptAction.showToast({ message: '保存成功' })

补充上传图片-基于uploadfile实现

request.uploadFile

完整示例代码如下：

import { BusinessError, request } from '@kit.BasicServicesKit';
// 定义一个上传配置对象，用于配置文件上传的相关参数
const uploadConfig: request.UploadConfig = {
url: '真实服务器的地址',
// 请求头信息，设置 Accept 为 / 表示接受任意类型的数据
header: { 'Accept': '/' },
// 请求方法，这里使用 POST 方法进行文件上传
method: "POST",
// 要上传的文件列表，每个文件由一个对象表示
files: [{

// 文件名
filename: "test",
// 文件在表单中的名称
name: "test",
// 文件的本地 URI，这里是 internal://cache/test.jpg
uri: "internal://cache/test.jpg",
// 文件的类型，这里是图片类型
type: "image/jpeg"

}],
// 要上传的额外数据，每个数据项由一个对象表示
data: [{

// 数据项的名称
name: "name123",
// 数据项的值
value: "123"

}],
};

try {
// 调用 request 对象的 uploadFile 方法进行文件上传，传入上下文和上传配置
request.uploadFile(getContext(), uploadConfig).then((data: request.UploadTask) => {

// 将返回的数据赋值给 uploadTask 变量，该数据是一个上传任务对象
const uploadTask:request.UploadTask = data;
// 显示一个警告对话框，提示上传任务信息
AlertDialog.show({message:'uploadTask'})

}).catch((err: BusinessError) => {

// 如果上传过程中出现业务错误，捕获错误并打印错误信息
console.error(`Failed to request the upload. Code: ${err.code}, message: ${err.message}`);

});
} catch (err) {
// 如果在请求上传过程中出现其他错误，捕获错误并打印错误信息
console.error(Failed to request the upload. err: ${JSON.stringify(err)});
}

适用HarmonyOS NEXT / API12或以上版本