HarmonyOS 如何通过Axios和FormData实现文件上传功能？

Question

如题：HarmonyOS 如何通过Axios和FormData实现文件上传功能？

Answer 1

Axios和FormData实现文件上传功能参考demo如下

import { picker } from '@kit.CoreFileKit'
import fs from '@ohos.file.fs';
import { Context } from '@kit.AbilityKit';
import fileUri from "@ohos.file.fileuri";
import axios, { AxiosProgressEvent, AxiosRequestConfig, AxiosResponse, FormData } from '@ohos/axios';
// import { HttpResponseModel } from '../core/network/config';

class HttpResponseModel{

}

@Entry
@Component
struct UploadPage {
  @State imageUrl: string = ''
  private context: Context = getContext(this)

  async executeUpload(filename: string) {
    let internalUri = `internal://cache/${filename}`;
    console.error('internal uri is:' + internalUri)

    let formData = new FormData()
    formData.append('file', internalUri)
    //formData.append('type', 1)
    let request: AxiosRequestConfig<FormData> = {
      url: 'input your url',
      headers:
      {
        'Accept': '/',
        'Content-Type': 'multipart/form-data',
      },
      method: "post",
      context: this.context,
      data: formData,
      onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
        console.error(progressEvent && progressEvent.loaded && progressEvent.total ? Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
      }
    }
    try {
      let resp: AxiosResponse<HttpResponseModel> =
        await axios.request<HttpResponseModel, AxiosResponse<HttpResponseModel>, FormData>(request)
    } catch (e) {
      console.error(e)
    }
  }
  build() {
    Column() {
      Image(this.imageUrl).width(100).height(100).backgroundColor('#F00')
      Button('select photo from gallery').onClick(async () => {
        let photoSelectOptions = new picker.PhotoSelectOptions();
        photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
        photoSelectOptions.maxSelectNumber = 1
        let uris: Array<string> = [];
        const photoViewPicker = new picker.PhotoViewPicker()
        let ctx = getContext(this)
        console.error(ctx.cacheDir)
        console.error(ctx.filesDir)
        let photoSelectResult = await photoViewPicker.select(photoSelectOptions)
        uris = photoSelectResult.photoUris;
        // 也可以换成已经拿到的图库图片uri
        let tmp_imageUri = uris[0]
        console.error('select image uri:$tmp_imageUri')
        // 1. 复制文件到沙箱
        fs.open(tmp_imageUri, (err, file) => {
          if (err) {
            console.error("file open failed with error message: " + err.message + ", error code: " + err.code);
          } else {
            let filename = '111.jpg'
            let filepath = this.context.cacheDir + '//' + filename;
            console.error('filename is:' + filename + ', file path is:' + filepath)
            fs.copyFile(file.fd, filepath, () => {
              // /data/storage/el2/base/haps/entry/cache/111.jpg
              this.imageUrl = fileUri.getUriFromPath(filepath)
              // start upload task
              this.executeUpload(filename)
            });
          }
        })

      })
    }
  }
}