18.2：打开相册上传图片

APP 开发过程中，会有上传图片的需求，比如用户设置头像，一般都是打开相册，选择相应图片，然后上传服务器，本节简单讲解一下打开相册和上传服务器的操作。

18.2.1：客户端选择图片

ArkUI 开发框架在 @ohos.multimedia.mediaLibrary 库中提供了打开相册的方法，该方法的回调参数里会返回选取的所有图片地址，地址格式是：dataability:///media/external/images/media/***，打开相册的过程如下：

• 引入 mediaLibrary 库

  import mediaLibrary from '@ohos.multimedia.mediaLibrary';
  

• 打开相册

  // 打开相册，调用startMediaSelect()方法
  private openGallery() {
    let option: mediaLibrary.MediaSelectOption = {
      type: "media", // 选取视屏和图片
      count: 1000
    }
  
    mediaLibrary.getMediaLibrary().startMediaSelect(option, (error, result) => {
      if (result) {
        result.forEach((value) => {
          console.log("value: " + value)
        })
      } else {
        console.log("error: " + JSON.stringify(error))
      }
    });
  }
  

  openGallery() 方法打开相册调用的是 startMediaSelect() 方法，startMediaSelect() 方法的回调参数 result 是一个数组，它是在相册里选取的所有图片地址集合，openGallery() 方法运行后打印日志如下：

  JSApp: app Log: path: dataability:///media/external/images/media/4345
  JSApp: app Log: path: dataability:///media/external/images/media/4339
  

  📢：MediaSelectOption 的 type 如果设置成 media，则 startMediaSelect() 方法返回的数据无法区分是图片还是视频。

18.2.2：客户端上传图片

笔者在第 12 章 第 3 小节 介绍过文件上传的操作，读者可自行前往阅读，这里就直接复用之前的代码，如下所示：

private uploadImages(paths: string[]) {
  var allFiles = Array<request.File>()
  for (var i = 0; i <paths.length; i++) {
    var path = paths[i]
    console.log("path: " + path)
    allFiles[i] = {
      name: "image" + i + ".jpg",
      filename: "image" + i + ".jpg",
      uri: path,
      type: "image"
    }
  }
  request.upload({
    url: "http://192.168.1.5:8080/java_0101_fileupload_war_exploded/uploadServlet",
    method: "POST",
    files: allFiles,
    header: {},
    data: [
      {
        name: "test",
        value: "value"
      }
    ]
  }, (error, response) => {
    if(response) {
      response.on('progress', (uploadedSize: number, totalSize: number) => {
        console.log("progress, uploadedSize: " + uploadedSize + ", totalSize: " + totalSize)
      })
    } else {
      console.log("upload failure: " + error)
    }
  });
}

uploadImages() 方法的参数 paths 是打开相册后返回的所选图片路径，考虑到多文件场景，笔者把所有路径都封装在 allFiles 中，最后调用 request 的 upload 方法做文件上传，执行该方法，打印日志如下所示：

JSApp: app Log: progress, uploadedSize: 81920,  totalSize: 342248
JSApp: app Log: progress, uploadedSize: 163840, totalSize: 342248
JSApp: app Log: progress, uploadedSize: 177941, totalSize: 342248
JSApp: app Log: progress, uploadedSize: 259861, totalSize: 342248
JSApp: app Log: progress, uploadedSize: 341781, totalSize: 342248
JSApp: app Log: progress, uploadedSize: 342248, totalSize: 342248

18.2.3：客户端完整样例

客户端选择图片并上传服务器的完整样例如下所示：

import mediaLibrary from '@ohos.multimedia.mediaLibrary';
import request from '@ohos.request';

@Entry @Component struct Index {

  build() {
    Column({space: 10}) {
      Button("打开相册")
        .onClick(() => {
          this.openGallery()
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  private openGallery() {
    let option: mediaLibrary.MediaSelectOption = {
      type: "media",
      count: 1000
    }
    mediaLibrary.getMediaLibrary().startMediaSelect(option, (error, result) => {
      if (result) {
        this.uploadImage(result)
      } else {
        console.log("error: " + JSON.stringify(error))
      }
    });
  }

  private uploadImage(paths: string[]) {
    var allFiles = Array<request.File>()
    for (var i = 0; i <paths.length; i++) {
      var path = paths[i]
      console.log("path: " + path)
      allFiles[i] = {
        name: "image" + i + ".jpg",
        filename: "image" + i + ".jpg",
        uri: path,
        type: "image"
      }
    }
    request.upload({
      url: "http://192.168.1.5:8080/java_0101_fileupload_war_exploded/uploadServlet",
      method: "POST",
      files: allFiles,
      header: {},
      data: [
        {
          name: "test",
          value: "value"
        }
      ]
    }, (error, response) => {
      if(response) {
        response.on('progress', (uploadedSize: number, totalSize: number) => {
          console.log("progress, uploadedSize: " + uploadedSize + ", totalSize: " + totalSize)
        })
      } else {
        console.log("upload failure: " + error)
      }
    });
  }
}

18.2.4：服务器接收图片

服务器接收客户端的数据，笔者为了简单演示，使用了 Servlet + fileupload 的方式，服务端样例代码如下：

@WebServlet(name = "uploadServlet", value = "/uploadServlet")
public class UploadServlet extends HttpServlet {

    private static final String CHARSET = "UTF-8";

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding(CHARSET);
        if (ServletFileUpload.isMultipartContent(req)) {
            File tempFile = new File(req.getSession().getServletContext().getRealPath("/") + "temp");
            if (!tempFile.exists()) tempFile.mkdirs();

            DiskFileItemFactory factory = new DiskFileItemFactory();
            factory.setSizeThreshold(1024 * 1024 * 10);
            factory.setRepository(tempFile);

            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setHeaderEncoding(CHARSET);

            File uploadFile = new File(req.getSession().getServletContext().getRealPath("/") + "upload");
            if (!uploadFile.exists()) uploadFile.mkdirs();

            try {
                List<FileItem> fileItems =  upload.parseRequest(req);
                for (FileItem item : fileItems) {
                    if (item.isFormField()) {
                        String name = item.getFieldName();
                        String value = item.getString(CHARSET);
                        System.out.println("name: " + name + ", value: " + value);
                    } else {
                        String fileName = item.getName();
                        File file = new File(uploadFile, fileName);
                        item.write(file);
                        System.out.println(fileName + ", file length: " + file.length());
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

        // doResponse(req, resp);
    }
}

客户端点击上传图片后，服务器端接收到请求，打印日志如下：

name: test, value: value
image0.jpg, file length: 177941
image1.jpg, file length: 164308

然后在服务器相应工程目录下的 upload 文件夹中就可以看到我们上传的文件了，截图如下所示：

18.2.5：小结

以上就是笔者讲述的打开相册上传图片的完整样例供读者参考，也非常欢迎读者给本网站提供更多的开发样例。

(adsbygoogle = window.adsbygoogle || []).push({});