UNI 多端文件下载实现方案

​#Uniapp#​ #HTML 5+#​

当前方案支持的平台如下:

  • H5
  • 微信小程序
  • APP
    • Android
    • IOS

代码方案

<ss-download ref="ssdownload" :suffix="suffix"/>
// 下载控件ref对象
const ssdownload = ref(null)
// 文件类型枚举  
const fileTypeEnum = {  img: 1,  file: 2,  video: 3,  
}
// 文件类型  
const fileType = (fileUrl) => {  // 文件后缀  const suffix = fileUrl.split('.').pop()  // 文件类型  if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(suffix)) {  return fileTypeEnum.img  } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt', 'psd'].includes(suffix)) {  return fileTypeEnum.file  } else if (['mp4', 'avi', 'rmvb', 'rm', 'flv', 'mov', '3gp', 'wmv', 'mkv'].includes(suffix)) {  return fileTypeEnum.video  } else {  return fileTypeEnum.file  }  
}
// 处理文件下载方法
const handleDownload = (url) => {  if (!url) {  uni.showToast({title: '文件已失效,当前无法下载', icon: 'none'})  return  }  const item = {  src: url,  type: fileType(url)  }  ssdownload.value.toDownload(item)  
}

ss-download.vue

<template>  <view></view></template>  <script>  
export default {  name: 'ss-download',  props: {  suffix: {  type: String,  default: ''  },  fileUrl: {  type: String,  default: ''  },  fileType: {  type: String,  default: '', },  },  data() {  return {};  },  methods: {  toDownload(item) {  console.log('item', item)  // #ifdef H5  this.downloadH5(item.src)  // #endif  // #ifdef MP-WEIXIN            if (item.type === 1) {  this.saveToPhotosAlbum(item.src)  } else if (item.type === 2) {  this.saveFile(item.src)  } else {  this.getDownVideo(item.src)  }  // #endif  // #ifdef APP-PLUS            this.saveFileToApp(item.src)  // #endif  },  //H5下载图片到本地  downloadH5(url) {  uni.downloadFile({  url: url,  success: (res) => {  console.log(res)  if (res.statusCode === 200) {  console.log('下载成功');  let oA = document.createElement("a");  oA.download = ''; // 设置下载的文件名,默认是'下载'  oA.href = res.tempFilePath; //临时路径再保存到本地  document.body.appendChild(oA);  oA.click();  oA.remove(); // 下载之后把创建的元素删除  }  }, fail(err) {  console.log(err)  }  });  },  //微信小程序保存文档,不支持h5  saveFile(url) {  const fileName = new Date().valueOf();  uni.showLoading({  title: '下载中...'  })  uni.downloadFile({ //下载文件资源到本地,返回文件的本地临时路径  url: url, //网络图片路径  success: (res) => {  console.log(res)  uni.showModal({  title: '提示',  content: '保存成功,请选择聊天转发分享后查看',  showCancel: false,  icon: 'success',  })  uni.shareFileMessage({  filePath: res.tempFilePath,  fileName: fileName + '.' + url.split('.').pop(),  success: function (res) {  console.log('success')  console.log(res)  uni.hideLoading()  },  fail: function (err) {  console.log('fail')  console.log(err)  uni.hideLoading()  uni.showToast({  title: '下载失败',  icon: 'none',  })  },  complete: function (res) {  console.log('complete')  console.log(res)  }  })  },  fail(err) {  uni.hideLoading()  uni.showToast({  title: '下载失败',  icon: 'none',  })  }  })  },  //微信小程序保存视频  getDownVideo(url) {  // 自定义 文件名称  uni.showLoading({  mask: true,  title: '下载中...'  })  let fileName = new Date().valueOf();  const task = uni.downloadFile({  url: url,  filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.' + this.data.suffix, //  拼接本地文件路径  success: (res) => {  let filePath = res.filePath  uni.saveVideoToPhotosAlbum({  filePath,  success: (res) => {  uni.showToast({  title: '下载成功',  icon: 'success',  })  let fileMgr = wx.getFileSystemManager();  // 删除本地文件  fileMgr.unlink({  filePath: wx.env.USER_DATA_PATH + '/' + fileName +  '.' + this.data.suffix,  success: function (r) {  console.log('unlink-getFileSystemManager')  console.log(r)  },  })  },  fail(err) {  uni.showToast({  title: '保存失败',  icon: 'none',  })  },  complete(res) {  console.log('saveVideoToPhotosAlbum-complete')  console.log(res)  uni.hideLoading()  }  })  },  fail(err) {  uni.showToast({  title: '下载失败,请稍后再试',  icon: 'none',  })  },  complete(res) {  console.log(res)  }  })  task.onProgressUpdate(this.onProgress)  },  // 提示下载进度  onProgress(res) {  uni.showLoading({  mask: true,  title: res.progress ? '下载中' + res.progress + "%" : '下载中...'  })  },  //微信小程序保存图片(此处也可用于app保存图片或视频)  saveToPhotosAlbum(url) {  // #ifdef APP-PLUS  const showLoading = plus.nativeUI.showWaiting("正在下载"); //创建一个showWaiting对象  // #endif  let task = uni.downloadFile({  url: url,  success: res => {  const {  statusCode,  tempFilePath  } = res  if (statusCode === 200) { // saveImageToPhotosAlbum  saveVideoToPhotosAlbum  uni.saveImageToPhotosAlbum({ //此处也可用saveVideoToPhotosAlbum  filePath: tempFilePath,  success: data => {  uni.showToast({  title: '下载成功,文件已保存到相册',  icon: 'success',  })  },  complete: (msg) => {  // #ifdef APP-PLUS  plus.nativeUI.closeWaiting()  // #endif  }  });  } else {  uni.showToast({  title: '下载失败',  icon: 'none',  })  // #ifdef APP-PLUS  plus.nativeUI.closeWaiting()  // #endif  }  },  complete: () => {  }  })  task.onProgressUpdate((res => {  // console.log('上传进度' + res.progress);  // console.log('已经上传的数据长度' + res.totalBytesSent);  // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);  showLoading.setTitle("  正在下载" + res.progress + "%  ");  }))  },  //移动端下载文件  saveFileToApp(url) {  let fileName = new Date().valueOf() + '.' + url.split('.').pop();  console.log('【文件下载】文件路径:' + url);  console.log('【文件下载】文件名:' + fileName);  const downloadTask = plus.downloader.createDownload(url, {  filename: "_downloads/" + fileName  },  function (d, status) {  uni.showToast({  title: '【文件下载】下载完成',  mask: false,  duration: 1000  });  // 下载完成  console.log('status: ' + status);  if (status === 200) {  let filePath = d.filename  plus.io.getFileInfo({  filePath, digestAlgorithm: 'md5', success: function (info) {  console.log('【文件下载】文件大小:' + info.size);  }, fail: function (err) {  console.log('【文件下载】获取文件信息失败:' + JSON.stringify(err));  }, complete: function (res) {  console.log('【文件下载】获取文件信息完成:' + JSON.stringify(res));  }  });  // console.log('【文件下载】下载文件成功:' + url);  //  filePath = plus.io.convertLocalFileSystemURL(url);                        console.log('【文件下载】本地文件路径: ' + filePath);  plus.runtime.openFile(filePath, {}, (err) => {  console.log('【文件下载】打开文件失败:', err)  })  } else {  uni.showToast({  title: '【文件下载】下载失败',  mask: false,  duration: 1500  });  }  });  try {  downloadTask.start(); // 开启下载的任务  let prg = 0;  const showLoading = plus.nativeUI.showWaiting("正在下载"); //创建一个showWaiting对象  downloadTask.addEventListener('statechanged', function (task, status) {  // 给下载任务设置一个监听 并根据状态  做操作  switch (task.state) {  case 1:  showLoading.setTitle("正在下载");  break;  case 2:  showLoading.setTitle("已连接到服务器");  break;  case 3:  prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);  showLoading.setTitle("  正在下载" + prg + "%  ");  break;  case 4:  plus.nativeUI.closeWaiting();  //下载完成  break;  }  });  } catch (err) {  plus.nativeUI.closeWaiting();  uni.showToast({  title: '更新失败',  mask: false,  duration: 1500  });  }  },  },  
};  
</script>

关于toDownload方法的调用过程,我们可以绘制一个更详细的流程图,展示这个方法内部的逻辑分支和调用顺序。以下是根据您提供的代码绘制的流程图:

graph TDA[开始] --> B[调用 toDownload 方法]B --> C{判断平台}C -->|H5平台| D[下载H5文件]C -->|微信小程序| E{判断item.type}C -->|APP-PLUS平台| F[下载文件到APP]E -->|item.type === 1| G[保存到相册]E -->|item.type === 2| H[保存文件]E -->|其他| I[下载视频]D --> J[下载H5文件流程结束]G --> K[保存图片到相册流程结束]H --> L[保存文件流程结束]I --> M[下载视频流程结束]F --> N[下载文件到APP流程结束]J --> O[流程结束]K --> OL --> OM --> ON --> O

流程图解释:

  • 开始:流程的起点。
  • 调用 toDownload 方法:开始执行toDownload方法。
  • 判断平台:根据代码中的编译指令(#ifdef),判断当前运行的平台环境。
  • 下载H5文件:如果是H5平台,执行H5文件下载逻辑。
  • 判断item.type:如果是微信小程序平台,根据item.type的值来决定执行哪个具体的下载或保存操作。
  • 保存到相册:当item.type === 1时,执行保存图片到相册的操作。
  • 保存文件:当item.type === 2时,执行保存文件的操作。
  • 下载视频:其他情况,执行下载视频的操作。
  • 下载文件到APP:如果是APP-PLUS平台,执行下载文件到APP的操作。
  • 下载H5文件流程结束:H5文件下载流程结束。
  • 保存图片到相册流程结束:保存图片到相册流程结束。
  • 保存文件流程结束:保存文件流程结束。
  • 下载视频流程结束:下载视频流程结束。
  • 下载文件到APP流程结束:下载文件到APP流程结束。
  • 流程结束:整个toDownload方法的执行流程结束。

这个流程图清晰地展示了toDownload方法在不同平台环境下的执行逻辑和分支。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/860449.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24.11.20 磁盘管理

磁盘外部结构 磁盘分类:固态硬盘:内部是主板和U盘类似机械硬盘:盘片 主轴 传动手臂 做机械运动 类似DVDNvme硬盘 PCI-E接口大小分类:3.5英寸:台式机2.5英寸:服务器 笔记本接口类型:IDE接口 # 淘汰SCSI接口 # 淘汰SATA接口 # 台式机 笔记本SAS接口 # 企业服务器标配固…

Julia疑难杂症专栏 | 安装问题汇总及其解决方案,从环境配置到结果验证,深度学习、科学计算、数据处理、大模型、并行处理,让你的代码飞起来

1. 下载慢的问题 使用端口问题 2. 下载慢的问题 ,设置镜像源加快速度 3. 一般的安装问题 4. STATA+julia 5. Vscode+julia 6. Jupyter+julia 7. Julia引入PyCall或者PyPlot报错卡顿 8. 彻底删除包的方法 9. Pkg.add("某个包")出现权限问题 permission denied (EACCE…

再战博客园美化(六)

连续剧更新了佬提了一嘴,于是我发现我替换没替换完,现在好了。 这是什么bug明明存在forFlow,但是不让我查询? 弄错了,用.就好light dark回来了,vue没有检查我默认有没有赋值,他只会自己贴一个上去。 算了,那就用vue的切换!不会吧。 在call后出现已被定义,有问题。被重…

arping 工具使用

1. 项目介绍arping 是一个用于在局域网(LAN)中查找特定 IP 地址是否被占用的实用工具。与传统的 ping 命令不同,arping 使用 ARP 协议来发送和接收数据包,从而能够检测到那些阻止 ICMP 请求的主机。arping 可以帮助网络管理员在调试网络时,快速确定哪些 IP 地址已经被占用…

Rules Of JSX 渲染列表 ‼️State

JSX只能拥有一个root元素,即只能有一个父元素。React不会渲染true或false到界面上,但会渲染0,1。 isOpen && <p>Hello!</p> 上述短路表达式意为:只有当isOpen为真时,才会执行第二部分内容,返回第二部分内容。如果isOpen为假且它的值为0,表达式会返回…

FastStone Capture10.9电脑截图工具中文绿色便携版

前言 FSCapture是一款集图像捕捉、浏览编辑、视频录制等功能于一身的屏幕截图软件,软件具有体积小巧、功能强大、操作简便等优点,其方便的浮动工具条和便捷的快捷键堪称完美结合。截图后的图片编辑与保存选项也特别丰富和方便,内置功能完善的图像编辑器,支持几乎所有主流图…

研途考研视频课件课程下载工具,如何在电脑端下载研途考研视频课程课件资料PDF,PPT到本地?

一. 安装研途课程下载器 1.获取学无止下载器 https://www.xuewuzhi.cn/kaoyanvip_downloader 2.下载安装后,然后点击桌面快捷方式运行即可。 注意:杀毒软件可能会阻止外部exe文件运行,并将其当做成病毒,直接添加信任即可,本软件绝对没有木马病毒。 二. 使用说明 1.学无止下…

golang 高频面试题

简述 Goroutine 的调度流程?Goroutine 是 Go 语言中的轻量级线程,Go 运行时使用调度器来管理 Goroutine 的执行。调度器的设计旨在高效地利用系统资源,并在多个 Goroutine 之间公平地分配 CPU 时间。以下是 Goroutine 调度的简要流程:Goroutine 的创建:当通过 go 关键字启…

NetBackup备份恢复工作流程workflow

# NetBackup备份恢复工作流程 在早期的NetBackup Troubleshooting guide中,详细描述了备份和恢复的步骤以及各个进程之间的调用关系,但是7.7以后的文档把这部分内容给取消了。在logging reference里面有类似内容,但是讲得不太清晰。备份流程从客户端或者Master Server GUI发…

如何快速体验chatGPT(AI问答)

由于账号的原因无法使用chatGPT,那有什么其他的办法可以体验一下这样的AI问答呢? 1、豆包 https://www.doubao.com/ 2、在魔塔modelscope的选择要体验的模型,在model详情页里,体验模型 https://www.modelscope.cn/studios/Qwen/QwQ-32B-preview/ 3、智谱AI https://open.…

合作招募

介绍 2025年将为潜在客户解决技术问题,并整理技术文档以满足其需求。根据问题的复杂度,文档的字数通常在1000-2500字之间,并配有相关截图 但为了提高合作效率并确保项目成功,彼此需共同承担部分前期成本(单次共承担最高不超30元,可当做找工作时的路费)。 该费用用于支持前…

第三次Blog 题目集7~8

一,前言 在题目集7和8中,我们逐步完善了智能家居强电电路模拟程序的功能和复杂性。题目集7以基本电路元件的特性和连接为核心,涵盖了开关、调速器、灯、风扇等设备的模拟,实现了多种控制设备和受控设备的电路设计与状态输出;而题目集8在此基础上新增了管脚电压显示、电流限…