鸿蒙图片上传下载与保存

鸿蒙harmony 图片的上传与保存

原理：由于鸿蒙无法直接操作相册图片，图片的上传保存需要将相册图片保存至沙箱目录中

沙箱文件目录：

应用沙箱目录介绍华为官方链接

1. 1.cache 应用缓存文件路径 特点:应用在本设备内部存储上用于缓存下载的文件或可重新生成的缓存文件的路径，应用cache目录大小超过配额或者系统空间达到一定条件，自动触发清理该目录下文件；用户通过系统空间管理类应用也可能触发清理该目录。应用需判断文件是否仍存在，决策是否需重新缓存该文件。
2. 2.file 应用通用文件路径 特点:应用在本设备内部存储上通用的存放默认长期保存的文件路径；随应用卸载而清理。注:图片文件的存储多用该路径实现

应用沙箱文件访问方式:

1. 1.internal协议路径，context.cacheDir等同于internal://cache，context为应用当前上下文
2. 2.file协议路径，context.fileDir等同于file://com.example.test/+context.fileDir，注:Image组件仅支持file协议路径
3. 3.应用沙箱目录，如context.fileDir以及context.cacheDir。应用沙箱访问方式完整见华为官方链接

图片文件上传（可以实现如头像上传等功能）

步骤:

1. 拉起华为相册，选择图片。使用 PhotoViewPicker 的select方法选择图片。链接

let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
  PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
  PhotoSelectOptions.maxSelectNumber = 5;
  let photoPicker = new photoAccessHelper.PhotoViewPicker();
  const res = await photoPicker.select(PhotoSelectOptions)

2. 调用## request.agent.create方法链接 用于图片的上传/下载，填入相关参数，如：

1.  let attachments: Array<request.agent.FormItem> = [{
1.  name: "createTest",
1.  value: {
1.  filename: "xxxx.jpg",
1.  mimeType: "multipart/form-data",
1.  path: "file://com.example.test/+context.fileDir",
1.  }
1.  }]; //-下载时，data为字符串类型，通常使用json(object将被转换为json文本)，默认为空。-上传时，data是表单项数组Array<[FormItem]默认为空。

1.  let config: request.agent.Config = {
1.  action: request.agent.Action.UPLOAD,
1.  url: 'http://127.0.0.1', // 需要手动将 url 替换为真实服务器的 HTTP 协议地址
1.  title: 'createTest',
1.  description: 'Sample code for create task',
1.  mode: request.agent.Mode.BACKGROUND,
1.  overwrite: false,
1.  method: "PUT",
1.  data: attachments,
1.  saveas: "./",
1.  network: request.agent.Network.CELLULAR,
1.  metered: false,
1.  roaming: true,
1.  retry: true,
1.  redirect: true,
1.  index: 0,
1.  begins: 0,
1.  ends: -1,
1.  gauge: false,
1.  precise: false,
1.  token: "it is a secret"
1.  };
1.  request.agent.create(getContext(), config, (err: BusinessError, task: request.agent.Task) => {
1.  if (err) {
1.  console.error(`Failed to create a download task, Code: ${err.code}, message: ${err.message}`);
1.  return;
1.  }
1.  console.info(`Succeeded in creating a download task. result: ${task.config}`);
1.  task.start();
1.  });

3.任务的监听,### on('progress')可以用于监听任务进度。### on('completed')用于监听任务的成功，若服务器有返回数据可以再on('completed')的回调函数中接收返回信息。### on('failed')，用于监听任务的失败，当任务失败时，触发改事件。

DEMO：

let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; PhotoSelectOptions.maxSelectNumber = 5; let photoPicker = new photoAccessHelper.PhotoViewPicker(); const res = await photoPicker.select(PhotoSelectOptions)
1.  let attachments: Array<request.agent.FormItem> = [{
1.  name: "taskOnTest",
1.  value: {
1.  filename: "taskOnTest.avi",
1.  mimeType: "application/octet-stream",
1.  path: "./taskOnTest.avi",
1.  }
1.  }];
1.  let config: request.agent.Config = {
1.  action: request.agent.Action.UPLOAD,
1.  url: 'http://127.0.0.1', // 需要手动将 url 替换为真实服务器的 HTTP 协议地址
1.  title: 'taskOnTest',
1.  description: 'Sample code for event listening',
1.  mode: request.agent.Mode.FOREGROUND,
1.  overwrite: false,
1.  method: "PUT",
1.  data: attachments,
1.  saveas: "./",
1.  network: request.agent.Network.CELLULAR,
1.  metered: false,
1.  roaming: true,
1.  retry: true,
1.  redirect: true,
1.  index: 0,
1.  begins: 0,
1.  ends: -1,
1.  gauge: false,
1.  precise: false,
1.  token: "it is a secret"
1.  };
1.  let createOnCallback = (progress: request.agent.Progress) => {
1.  console.info('upload task failed.');
1.  };
1.  request.agent.create(getContext(), config).then((task: request.agent.Task) => {
1.  task.on('failed', createOnCallback);
1.  console.info(`Succeeded in creating a upload task. result: ${task.tid}`);
1.  task.start();
1.  }).catch((err: BusinessError) => {
1.  console.error(`Failed to create a upload task, Code: ${err.code}, message: ${err.message}`);
1.  });