HarmonyOS鸿蒙Next应用开发中，实现文件上传功能

HarmonyOS鸿蒙Next应用开发中，实现文件上传功能 在 ArkTS 中实现文件上传可以通过以下步骤：

一、准备工作

  • 确定上传目标：明确文件要上传到的服务器地址和接口。确保服务器端已经配置好接收文件上传的功能。

二、引入必要的模块 在 ArkTS 文件中，引入与网络请求和文件操作相关的模块。例如：

import { rcp } from '@kit.RemoteCommunicationKit';
import { picker } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import fs from '@ohos.file.fs';

三、实现文件上传逻辑

  1. 创建文件选择器实例：

    const documentViewPicker = new picker.DocumentViewPicker(context);
let documentSelectOptions = new picker.DocumentSelectOptions();
documentSelectOptions.maxSelectNumber = 1;
documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4', '.jpg'];
documentSelectOptions.authMode = true;

  2. 选择文件，配置上传服务器的参数，代码如下：

    documentViewPicker.select(documentSelectOptions).then(async (documentSelectResult: Array<string>) => {
  const context = getContext(this);
  const fileType = 'jpg';
  const fileName = Date.now() + '.' + fileType;
  const copyFilePath = context.cacheDir + '/' + fileName;
  const file = fs.openSync(documentSelectResult[0], fs.OpenMode.READ_ONLY);
  fs.copyFileSync(file.fd, copyFilePath);

  const formFieldFileValue: rcp.FormFieldFileValue = {
    contentType: "image/png",
    remoteFileName: fileName,
    contentOrPath: copyFilePath,
  };

  const formData = new rcp.MultipartForm ({
    'file': formFieldFileValue
  });

  axiosInstance.post(CommonConstant.BASE_URL+CommonConstant.UPLOAD_PATH,formData)
    .then((response:AxiosResponse)=>{
      console.error("上传文件", JSON.stringify(response))
    }).catch((err:BusinessError)=>{
      console.info("上传文件接口报错", JSON.stringify(err));
    });
});

  3. 发送请求 以下是一个示例代码：

async onUpload(){
  try {
    let context = getContext(this) as common.Context;
    const documentViewPicker = new picker.DocumentViewPicker(context);
    let documentSelectOptions = new picker.DocumentSelectOptions();
    documentSelectOptions.maxSelectNumber = 1;
    documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4', '.jpg'];
    documentSelectOptions.authMode = true;

    documentViewPicker.select(documentSelectOptions).then(async (documentSelectResult: Array<string>) => {
      const context = getContext(this);
      const fileType = 'jpg';
      const fileName = Date.now() + '.' + fileType;
      const copyFilePath = context.cacheDir + '/' + fileName;
      const file = fs.openSync(documentSelectResult[0], fs.OpenMode.READ_ONLY);
      fs.copyFileSync(file.fd, copyFilePath);

      const formFieldFileValue: rcp.FormFieldFileValue = {
        contentType: "image/png",
        remoteFileName: fileName,
        contentOrPath: copyFilePath,
      };

      const formData = new rcp.MultipartForm ({
        'file': formFieldFileValue
      });

      axiosInstance.post(CommonConstant.BASE_URL+CommonConstant.UPLOAD_PATH,formData)
        .then((response:AxiosResponse)=>{
          console.error("上传文件", JSON.stringify(response))
        }).catch((err:BusinessError)=>{
          console.info("上传文件接口报错", JSON.stringify(err));
        });
    })

  } catch (error) {
    console.error('文件上传错误：', error);
  }
}

更多关于HarmonyOS鸿蒙Next应用开发中，实现文件上传功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

学习了

更多关于HarmonyOS鸿蒙Next应用开发中，实现文件上传功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next应用开发中，实现文件上传功能可以通过使用[@ohos](/user/ohos).request模块中的uploadFile方法来完成。以下是一个简单的实现步骤：

  1. 引入模块： 首先，在代码中引入[@ohos](/user/ohos).request模块。

    import request from '[@ohos](/user/ohos).request';

  2. 配置上传参数： 创建一个UploadFileOptions对象，配置上传的文件路径、服务器URL、请求头等信息。

    let uploadOptions = {
    url: 'https://your-server-url.com/upload', // 服务器URL
    files: [
        {
            filename: 'example.txt', // 文件名
            name: 'file', // 表单字段名
            uri: 'internal://app/example.txt', // 文件路径
            type: 'text/plain' // 文件类型
        }
    ],
    header: {
        'Content-Type': 'multipart/form-data' // 请求头
    }
};

  3. 执行上传： 调用uploadFile方法，传入配置参数，执行文件上传。

    request.uploadFile(uploadOptions).then((response) => {
    console.log('Upload success:', response.data);
}).catch((error) => {
    console.error('Upload failed:', error);
});

  4. 处理响应： 在then回调中处理上传成功的响应，在catch回调中处理上传失败的情况。

通过以上步骤，你可以在HarmonyOS鸿蒙Next应用中实现文件上传功能。

在HarmonyOS鸿蒙Next应用开发中，实现文件上传功能可以通过以下步骤：

  1. 选择文件：使用FilePicker组件让用户选择需要上传的文件。
  2. 读取文件：通过File API读取文件内容，获取文件数据。
  3. 网络请求：使用Http或HttpURLConnection发起POST请求，将文件数据作为请求体发送到服务器。
  4. 处理响应：接收服务器返回的响应，处理上传结果。

示例代码：

FilePicker filePicker = new FilePicker(context);
filePicker.pickFile(new FilePicker.FilePickResult() {
    @Override
    public void onResult(File file) {
        byte[] fileData = FileUtils.readFileToByteArray(file);
        HttpRequest request = new HttpRequest("POST", "https://your-server.com/upload");
        request.setBody(fileData);
        HttpResponse response = request.execute();
        // 处理响应
    }
});

确保在config.json中声明网络权限。

回到顶部