HarmonyOS鸿蒙Next中上传图片到服务器需要配置后端nodejs 下一篇

HarmonyOS鸿蒙Next中上传图片到服务器需要配置后端nodejs 下一篇

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { promptAction } from '@kit.ArkUI';
import { fileIo } from '@kit.CoreFileKit';
import { request } from '@kit.BasicServicesKit';

class ResponseResult {
  code: string;
  msg: string | Resource;
  data: string | Object | ArrayBuffer;

  constructor() {
    this.code = '';
    this.msg = '';
    this.data = '';
  }
}

@Entry
@Component
struct SelectPhoto {
  @State imageUri: string = ''
  @State isUploading: boolean = false
  @State imgName: string | undefined = ''

  //从相册选择图片
  async fileSelect(): Promise<string> {
    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    photoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    try {
      let photoSelectResult = await photoPicker.select(photoSelectOptions);
      if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {
        let imgUri = photoSelectResult.photoUris[0];
        if (imgUri.indexOf('media/Photo') < 0) {
          promptAction.showToast({
            message: '请选择图片进行上传',
            duration: 1000
          });
          return '';
        }
        return photoSelectResult.photoUris[0];
      } else {
        return '';
      }
    } catch (err) {
      console.log('失败')
      return '';
    }
  }

  selectImage() {
    this.fileSelect().then((uri: string) => {
      this.imageUri = uri || '';
    });
  }

  savePhotoToSandbox(context: Context, fileUri: string) {
    // 获取应用的沙箱路径
    let cacheDir = context.cacheDir;
    // 获取到文件名
    this.imgName = fileUri.split('/').pop();
    // 图片保存到沙箱中的目标路径
    let dstPath = cacheDir + '/' + this.imgName;

    // fileIo.openSync: 以同步的方式打开文件
    // srcFile.fd 获取文件描述符
    let srcFile = fileIo.openSync(fileUri); // 以只读方式打开

    // fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE
    // 如果没有该文件，则创建并打开，如果有，以可读可写的方式打开
    let dstFile = fileIo.openSync(dstPath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
    // 把源文件复制到沙箱中的目标文件
    fileIo.copyFileSync(srcFile.fd, dstFile.fd);
    fileIo.closeSync(srcFile);
    fileIo.closeSync(dstFile);
    console.log('已经把图片放入沙箱,可以开始上传了')
  }

  async fileUpload(context: Context) {
    let uploadRequestOptions: request.UploadConfig = {
      url: "http://172.16.1.103:3000/upload",
      header: {
        'Content-Type': 'multipart/form-data'
      },
      method: "post",
      files: [{
        filename: this.imgName as string,
        name: 'file',
        uri: 'internal://cache/' + this.imgName,
        type: 'jpg'
      }],
      data: []
    };
    let serverData = new ResponseResult();
    // Upload the file.
    request.uploadFile(context, uploadRequestOptions).then((data: request.UploadTask) => {
      data.on('complete', (result: Array<request.TaskState>) => {
        console.log('uploadFile success', JSON.stringify(result));
        if (result && result.length >= 1) {
          serverData.code = '200';
          serverData.msg = result[0].message;
          serverData.data = '/images/' + result[0].path.split('/').pop();
          console.log('1.serverData', JSON.stringify(serverData));
        }
      });
      data.on('fail', (result: Array<request.TaskState>) => {
        console.info('uploadFile failed', JSON.stringify(result));
        if (result && result.length >= 1) {
          serverData.msg = "上传文件失败，请重试！";
          console.log('2.serverData', JSON.stringify(serverData));
        }
      })
    }).catch((err: Error) => {
      console.error('uploadFile failed', JSON.stringify(err));
      console.log('3.serverData', JSON.stringify(serverData));
    });
  }

  build() {
    Column() {
      Text('图片地址' + this.imageUri)
      // 从相册选择图片
      Image(this.imageUri ? this.imageUri : $r('app.media.startIcon'))
        .width(100)
        .height(100)
        .objectFit(ImageFit.Cover)

      Button("1.选择图库中的图片").onClick(() => this.selectImage())

      Button("2.把图片放入沙箱中").onClick(() => {
        this.savePhotoToSandbox(getContext(this), this.imageUri)
      })
      Button("3.上传沙箱中的图片").onClick(() => {
        this.fileUpload(getContext(this))
      })

    }
  }
}