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

HarmonyOS
2024-12-25 09:50:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

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

      })
    }
  }
}
分享
微博
QQ
微信
回复
2024-12-25 11:58:54
相关问题
Web组件如何实现文件上传功能
642浏览 • 1回复 待解决
如何HarmonyOS实现图片上传功能
598浏览 • 0回复 待解决
HarmonyOS Web 图片上传功能失效
432浏览 • 1回复 待解决
HarmonyOS axios上传文件失败
308浏览 • 1回复 待解决
HarmonyOS 如何通过SFTP上传文件
164浏览 • 1回复 待解决
HarmonyOS axios上传文件数据传递问题
99浏览 • 1回复 待解决
HarmonyOS axios如何上传图片
266浏览 • 1回复 待解决
HarmonyOS axios如何上传多张图片
287浏览 • 1回复 待解决
HarmonyOS 如何使用Axios框架上传图片
194浏览 • 1回复 待解决
HarmonyOS web上传文件图片
420浏览 • 1回复 待解决
HarmonyOS 如何实现文件选择功能
326浏览 • 1回复 待解决
使用axios上传图片时候错误
414浏览 • 1回复 待解决
HarmonyOS 如何上传文件
344浏览 • 1回复 待解决