上传图库图片到服务器就这么简单 原创

​
@toc

前言

      在学习上传图库图片到服务器前，先学习一下这篇帖子ArkTS(3.0与3.1)前端和SpringBoot后端文件上传示例(Request.upload)怎么上传文件到服务器的，然后看一下如何从图库选择图片文档 选择用户文件 有了这方面知识后，实现上传图库图片到服务器就是这么简单了。如图：

知识点

示例：

async function example() {
  try {  
    let PhotoSelectOptions = new picker.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 5;
    let photoPicker = new picker.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
      console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
    }).catch((err) => {
      console.error('PhotoViewPicker.select failed with err: ' + err);
    });
  } catch (err) {
    console.error('PhotoViewPicker failed with err: ' + err);
  }
}

实例源码

import picker from '@ohos.file.picker';
import common from '@ohos.app.ability.common';
import fs from '@ohos.file.fs';
import request from '@ohos.request';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let cacheDir = context.cacheDir;
// 上传任务配置项
let uploadConfig = {
  url: 'http://192.168.3.48:8740/file/upload',
  header: { key1: 'Content-Type', key2: 'multipart/form-data' },
  method: 'POST',
  files: [
    { filename: 'test.jpg', name: 'test', uri: 'internal://cache/test.jpg', type: 'jpg' }
  ],
  data: [
    { name: 'fileId', value: 'FP000008' }
  ]
}

@Entry
@Component
struct Index {
  @State message: string = ''
  @State imgSrc: string = ''

  async selectImage() {
    try {
      let PhotoSelectOptions = new picker.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
      PhotoSelectOptions.maxSelectNumber = 1;
      let photoPicker = new picker.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
        console.info('xx PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
        // 从图库选择图片后，返回图片uri
        let uri = PhotoSelectResult.photoUris[0];
        console.info('xx uri:' + uri)
        this.imgSrc = uri
        // 读取上面返回uri
        let file = fs.openSync(uri, fs.OpenMode.CREATE);
        // 复制文件到缓存目录下
        fs.copyFileSync(file.fd, cacheDir + '/test.jpg')
        // 上传文件到服务器上
        this.uploadImage()
      }).catch((err) => {
        console.error('xx PhotoViewPicker.select failed with err: ' + err);
      });
    } catch (err) {
      console.error('xx PhotoViewPicker failed with err: ' + err);
    }
  }

  uploadImage() {
    // 将本地应用文件上传至网络服务器
    try {
      request.uploadFile(context, uploadConfig)
        .then((uploadTask) => {
          uploadTask.on('complete', (taskStates) => {
            for (let i = 0; i < taskStates.length; i++) {
              console.info(`xx upload complete taskState: ${JSON.stringify(taskStates[i])}`);
              this.message = JSON.stringify(taskStates[i])
            }
          });
        })
        .catch((err) => {
          console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
          this.message = err.message
        })
    } catch (err) {
      console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
      this.message = err.message
    }
  }

  build() {
    Column({space: 30}) {
      Button('打开图库')
        .width('80%').height('40')
        .onClick(() => {
          this.selectImage()
        })
      Image(this.imgSrc)
        .width('50%').height('50%')
      Text(this.message)
        .fontSize(20).width('100%')
    }
    .width('100%').height('100%')
    .padding(10)
  }
}

​