当前位置：首页 > news >正文

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

news 2024/10/22 11:43:50

在 ArkTS 中实现文件上传可以通过以下步骤：

一、准备工作

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

二、引入必要的模块

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

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

三、实现文件上传逻辑

创建文件选择器实例：

	  const documentViewPicker = new picker.DocumentViewPicker(context);let documentSelectOptions = new picker.DocumentSelectOptions();documentSelectOptions.maxSelectNumber = 1documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4', '.jpg'];//选择是否对指定文件或目录授权，true为授权，当为true时，defaultFilePathUri为必选参数，拉起文管授权界面；false为非授权，拉起常规文管界面（可选）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 // file表示服务器端接收的数据的属性名})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));})})

发送请求

以下是一个示例代码：

  async onUpload(){try {let context = getContext(this) as common.Context; // 请确保 getContext(this) 返回结果为 UIAbilityContext// 创建文件选择器实例const documentViewPicker = new picker.DocumentViewPicker(context);let documentSelectOptions = new picker.DocumentSelectOptions();documentSelectOptions.maxSelectNumber = 1documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4', '.jpg'];//选择是否对指定文件或目录授权，true为授权，当为true时，defaultFilePathUri为必选参数，拉起文管授权界面；false为非授权，拉起常规文管界面（可选）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 // file表示服务器端接收的数据的属性名})// axiosInstance是自定义的请求方法     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);}}