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

狼哥Army
发布于 2023-6-23 21:15
浏览
3收藏


@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)
  }
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2023-6-23 21:19:11修改
4
收藏 3
回复
举报
8条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

确实没想的那么难

已于2023-6-24 12:11:45修改
回复
2023-6-24 12:09:48
NL_AIDC_XJS
NL_AIDC_XJS

文件必须要复制到缓存目录下才能读取发送吗?应用中是否可以读取媒体文件库中的图片直接发送呢?

回复
2023-6-25 08:43:33
狼哥Army
狼哥Army 回复了 NL_AIDC_XJS
文件必须要复制到缓存目录下才能读取发送吗?应用中是否可以读取媒体文件库中的图片直接发送呢?

目前API说是只能上传缓存目录下文件。

回复
2023-6-25 10:29:23
物联风景
物联风景

不错不错,非常好啊!

回复
2023-6-26 09:17:07
qq659f92d5ace28
qq659f92d5ace28

为什么我上传多张图片的时候,它是分割成一张图片,发送多次请求呢



回复
2024-1-11 15:05:01
wx65ad220a928fe
wx65ad220a928fe

为什么我openSync的时候会报错,提示权限不允许

回复
2024-2-28 16:21:23
wx65ad220a928fe
wx65ad220a928fe 回复了 wx65ad220a928fe
为什么我openSync的时候会报错,提示权限不允许

报错:Permission verification failed

回复
2024-2-28 18:56:19
qq65df3c2c06033
qq65df3c2c06033

请问后端怎么接收呢

回复
2024-2-28 22:40:32
回复
    相关推荐