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

狼哥Army

发布于 2023-6-23 21:15

浏览

3收藏

前言

在学习上传图库图片到服务器前，先学习一下这篇帖子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);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

实例源码

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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.