HarmonyOS:基于axios实现文件的下载以及下载进度的监听

#前言:项目开发中,避免不了实现文件下载功能,其他平台的下载都很成熟,网上的例子也比较多,我就自己项目中实现的下载功能做个总结,你可以参考我的写法实现功能。 下载封装基于axios实现的下载功能。

1.下载文件url:xxx

2.文件操作封装类:FileUtil ,是桃花源长老的文件封装库,第三方库,各种工具类很多,很方便

3.下载方法:dowLoadFileCallBack

4.下载封装:axiosClient.downLoadFil

简单的介绍,详细的下载步骤如下:

//下载方法,开始下载

kotlin 复制代码
startDownLoadFileTask(){
    //下载文件路径
    let testUrl ='xxx'
    if (FileUtil.accessSync(this.fileSavePath)&&this.downLoadFile.fileDownLoadStatus =='3') {
      WinLog.info('文件存在,不用下载直接打开')
      this.previewFileMethod();
      return;
    }
    //先删除旧的未下载完毕的文件
    if (FileUtil.accessSync(this.fileSavePath)) {
      FileUtil.unlinkSync(this.fileSavePath);
    }
    HttpRequest.dowLoadFileCallBack(testUrl,this.fileSavePath,({
      onResult:(downLoadInfo:WinDownloadFileModel)=>{
        //下载状态值,主要是用来区分图片的展示状态
        this.downStatusName = 'ic_downing_status';
        if (this.progress==100) {
          this.downStatusName = 'ic_play_status';
        }
        if (downLoadInfo.fileDownLoadStatus=='3') {
          downLoadInfo.fileUrl = this.downLoadFile.fileUrl;
          this.downLoadFile.fileDownLoadStatus = '3';
          //更新本地数据库状态
          BaseDownFileQueryManager.updateDownFileTableData(downLoadInfo);
        }
        //下载进度条的值显示
        this.progress = downLoadInfo.fileDownProgress;
        //计算下载的文件大小
        this.fileSize = `文件大小:${FileUtil.getFormatFileSize(downLoadInfo.fileLength)}`
      }
    }),({
      onError:(error:string)=>{
        this.downStatusName = 'ic_needdown_status';
        WinLog.error('下载文件报错:'+ error);
        this.downLoadFile.fileDownLoadStatus = '2';
      }
    }))
  }
HttpRequest类,下载的方法

/*

  • 文件下载方法
  • @param url下载地址
  • @param filePath文件路径
  • @param successCallBack成功回调
  • @param failureCallBack
  • */
typescript 复制代码
static dowLoadFileCallBack(url:string,filePath:string,successCallBack?:DownLoadCallback,failureCallBack?:DownLoadErrorCallback){
    const commonHeader: AxiosHeaders = new AxiosHeaders()
    commonHeader.set('Accept-Language', i18n.System.getSystemLanguage())
    commonHeader.set('User-Agent', commonUtils.getUserAgent())
    commonHeader.set('Content-Type', 'application/x-www-form-urlencoded')
    axiosClient.downLoadFile(filePath,{
      url: url,
      headers: commonHeader,
      showLoading: false,
    },successCallBack,failureCallBack);
  }
}
//自定义封装的回调类
export interface DownLoadCallback {
  /**
   * 下载回调
   * @param popInfo
   */
  onResult?: (downLoadingInfo: WinDownloadFileModel) => void;
}
export interface DownLoadErrorCallback {
  onError?: (error: string) => void;
}
文件下载的具体实现方法,主要是基于axios的文件下载方法,进行了二次封装,适用于自己的项目下载,你也可以参看我的方法,改成适合你的项目用法,都是很简单的,我这个只是单文件的下载,还没进行多文件同时下载,多文件下载需要进行线程控制,以及队列控制。
ini 复制代码
/*
   * 文件下载
   * **/
  downLoadFile(filePath:string,config?: HttpRequestConfig,successCallBack?:DownLoadCallback,failureCallBack?:DownLoadErrorCallback){
    axios({
      url: config?.url,
      method: 'get',
      context: getContext(this),
      filePath: filePath ,
      onDownloadProgress: (progressEvent: AxiosProgressEvent): void => {
        //下载回掉,状态设置,以及进度的回调
        let downProgressModel = new WinDownloadFileModel();
        if (progressEvent.total&&progressEvent.total>0) {
          downProgressModel.fileDownLoadStatus = '2';
          downProgressModel.fileDownProgress = NumberUtil.toFloat((progressEvent.loaded / progressEvent.total * 100).toFixed(2).toString());
          downProgressModel.fileLength = progressEvent.total;
          if (successCallBack&&successCallBack.onResult) {
            successCallBack.onResult(downProgressModel);
          }
        }else {
          downProgressModel.fileDownLoadStatus = '1';
          downProgressModel.fileDownProgress = 0
          if (successCallBack&&successCallBack.onResult) {
            successCallBack.onResult(downProgressModel);
          }
        }
      }
    }).then((res: AxiosResponse<string>) => {
     //下载完毕的回调
      winLog.info('down load finish:'+ JSON.stringify(res));
      let downProgressModel = new WinDownloadFileModel();
      downProgressModel.fileDownLoadStatus = '3';
      downProgressModel.fileDownProgress = 100;
      //计算下载文件的大小
      let fileSize = FileUtil.getFileDirSize(filePath);
      downProgressModel.fileLength = fileSize;
          if (successCallBack&&successCallBack.onResult) {
            successCallBack.onResult(downProgressModel);
          }    
        
     }).catch((error: AxiosError) =>{
      //下载失败的回调
      if (failureCallBack&&failureCallBack.onError) {
        failureCallBack.onError(error.message);
      }
    })
  }

这些代码就可以实现单文件的下载,以及进度条的展示,以及下载状态的更新。有什么疑问可以随时询问,感谢mark。

相关推荐
codeGoogle12 小时前
Vue3 UIKit 实战:把聊天、会话、主题和移动端适配全部封装好
前端
大龄秃头程序员12 小时前
iOS Method Swizzling 的工程化实践:如何处理多重交换与第三方冲突
前端
liangshanbo121513 小时前
Webpack 文件指纹面试题整理
前端·webpack·node.js
xieter13 小时前
【技术精选】Node.js 核心事件循环机制与异步 I/O 深度剖析 (2026-10-02)
前端·javascript
计算机魔术师13 小时前
Ethan Mollick 谈点与群:智能体自组织为何让管理假设失效
前端
故七月14 小时前
GEO 信源评估体系:如何判断一条网页信源能否被大模型采信
前端·网络·人工智能
liangshanbo121514 小时前
Webpack 常见 Plugin 面试题
前端·webpack·node.js
xxwl58514 小时前
vue3的入门学习
前端·vue.js·学习
用户8471721028414 小时前
.shot 文件格式规范
前端·后端
web打印社区14 小时前
政务办事大厅:叫号小票、办理回执网页怎么静默出纸
前端·javascript·vue.js·pdf·html·政务