实际记录uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题以及解决方法

这篇具有很好参考价值的文章主要介绍了实际记录uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题以及解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

app里的开发的小程序需要下载文件功能以及一个下载中心页面可以查看所有下载的文件,使用了uni.download下载以及uni.saveFile保存文件
下载中心页面实现逻辑
1.下载文件后保存文件名和uni.saveFile返回的路径uni.setStorageSync到缓存里

uni.downloadFile({
					    method: 'GET',
					    url: 你的url,
					    timeout: 5000,
					   header:{
					     authorization: 你的token,
					   },
					    success: (data) => {
							//接口返回的文件流
							console.log("fileData",data)
					            if (data.statusCode === 200) {
					                    //文件保存到本地
					                    uni.saveFile({
					                            tempFilePath: data.tempFilePath, //临时路径
					                            success: function(res) {
					                                console.log("data.",res)
														let list = uni.getStorageSync("__local_down_history");
														if (list.length) {
															let arrNew=list
															let newObj={
																path:res.savedFilePath,
																name:fundcode+"_"+fundNo+'.'+fileType
															}
															arrNew.unshift(newObj);
															_this.localSearchList=arrNew
															// arrUnique(this.localSearchList);
														} else {
															_this.localSearchList = [{
																path:res.savedFilePath,
																name:fundcode+"_"+fundNo+'.'+fileType
															}];
														}
														console.log("文件缓存",_this.localSearchList)
														uni.setStorageSync("__local_down_history", _this.localSearchList);        
					                            }
					                    });
										
					            }
					    },
					    fail: (err) => {
					            console.log(err);
					            // uni.showToast({
					            //         icon: 'none',
					            //         mask: true,
					            //         title: '失败请重新下载',
					            // });
					    },
					})

2.下载中心读取uni.getStorageSync缓存的文件列表

<ourLoading isFullScreen :active='loadingStatus' text="加载中..." color='rgb(0, 106, 254)' textColor='rgb(0, 106, 254)'	 />
<uni-list class="uni-list" :border="false" style="margin-bottom: 50px;">
				<!-- 列表渲染 -->
				<uni-list-item v-for="(item,index) in currnetArr" :key="index" >
					<template v-slot:body>
						<view class="main">
							<view class="mainContent"  >
							//节流打开文件
									<text class="author" style="color: #89939B;" @tap="$u.throttle(openURL(item.path), 1000)">{{item.name}}</text>
							</view>
								
						</view>
					</template>
				</uni-list-item>
			</uni-list>
data() {
			return {
				currnetArr:uni.getStorageSync(你保存的缓存key值),
				loadingStatus:false,
			}
openURL(path){
				console.log('path',path)
				const _this = this
				if(!this.loadingStatus) {
					this.loadingStatus = true
					setTimeout(() => {
						uni.openDocument({
								filePath: path,
								success: function(res) {
										_this.loadingStatus = false
										console.log('打开文档成功');
								},
								fail: function(e){
									_this.loadingStatus = false
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件打开失败',
									});
								}
						});
					}, 1000)
				}
				
				
			},

问题描述

通过这种uni.downloadFile配合uni.saveFile下载并保存文件,然后在下载中心点击打开文件,逻辑是没问题的。但是这个方式苹果手机可以正常打开文件,安卓一直打开文件报错。


原因分析:

分析是download方法的问题,保存文件一般是内部复制,系统差异应该是保存路径的问题, 即uni.saveFile返回的savedFilePath保存的临时文件路径问题


解决方案:

配合H5+的下载方法,强行指定下载路径,这样就不会有临时路径的差异了,从而解决安卓系统打不开文件问题,下面是下载文件最终版本代码文章来源地址https://www.toymoban.com/news/detail-526045.html

uni.downloadFile({
					     method: 'GET',
					     url: 你的url,
					     timeout: 2000,
					    header:{
					      authorization:你的 token,
					    },
					     success: (data) => {
					             if (data.statusCode === 200) {
									 plus.io.resolveLocalFileSystemURL( data.tempFilePath, function( entry ) {
										 const name = `${entry.name}.pdf` //这里设置文件名根据自己的下载文件后缀来修改,我这边需求是pdf
										 entry.getParent(function(scb) {
											 entry.moveTo(scb,name, function(sEntry) {
												 //文件保存到本地
												uni.saveFile({
														tempFilePath: sEntry.fullPath, //临时路径
														success: function(res) {
																// 判断手机平台是 Android 还是 IOS
																if (uni.getSystemInfoSync().platform === 'android') {
																		uni.showModal({
																				title:"保存地址为:",
																				content: res.savedFilePath,
																				duration: 3000,
																		})
																} else {
																		uni.showModal({
																				icon: 'none',
																				title: '文件已保存:',
																				content: res.savedFilePath,
																				duration: 3000,
																		});
																}
																
																let list = uni.getStorageSync("__local_down_history");
																if (list.length) {
																	let arrNew=list
																	let newObj={
																		path:res.savedFilePath,
																		name:"收据."+ReceiptNo+'.pdf' 
																		//这里的保存的name是下载中心展示的文件名,不是这个文件原本的名字
																	}
																	arrNew.unshift(newObj);
																	_this.localSearchList=arrNew
																	// arrUnique(this.localSearchList);
																} else {
																	_this.localSearchList = [{
																		path:res.savedFilePath,
																		name:"收据."+ReceiptNo+'.pdf'
																	}];
																}
																console.log("文件缓存",_this.localSearchList)
																uni.setStorageSync("__local_down_history", _this.localSearchList);        
														}
												});
											 } )
										 })
									 })
					                     
					             }
					     },
					     fail: (err) => {
					             console.log(err);
					             uni.showToast({
					                     icon: 'none',
					                     mask: true,
					                     title: '失败请重新下载',
					             });
					     },
					 })

到了这里,关于实际记录uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题以及解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app黑马优购项目学习记录(上)

    🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 蓝桥杯真题解析:蓝桥杯Web国赛真题解析 🧧 加入社区领红包:海底烧烤店ai(从前端到全栈) 🧑‍💼个人简介:即将大三的学生,一个不甘平庸的平凡人🍬 👉 你的一键三连是我更新的最大动力❤️! 🏆分享博主自用 牛客网

    2024年02月10日
    浏览(47)
  • 记录--『uni-app、小程序』蓝牙连接、读写数据全过程

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 这是一次真实的 蓝牙收发数据 的全过程讲解。 本文使用 uni-app + Vue3 的方式进行开发,以手机app的方式运行(微信小程序同样可行)。 uni-app 提供了 蓝牙 和 低功耗蓝牙 的 api ,和微信小程序提供的 api 是一样

    2024年01月21日
    浏览(52)
  • [uni-app]微信小程序隐私保护指引设置的处理记录

    关于小程序隐私保护指引设置的公告 一切的起因就是上面这则公告. 2023年9月15日后 自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私

    2024年02月09日
    浏览(53)
  • 小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

    一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后,项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件,使用组件 八、经过测试,成功。 参考链接 http://lihuaxi.xjx100.cn/new

    2024年02月12日
    浏览(57)
  • 记录uni-app + vue3 + vite + uni-ui 小程序出现 Invalid pattern 的报错处理

    登录 - Gitee.com uni-ui 现在只推荐使用 easycom ,如自己引用组件,可能会出现组件找不到的问题 uni-ui 不支持使用 Vue.use() 的方式安装 在  vue-cli  项目中可以使用  npm  安装  uni-ui  库  注意  cli 项目默认是不编译  node_modules  下的组件的,导致条件编译等功能失效 ,导致组件

    2024年02月19日
    浏览(62)
  • 【uni-app】uni-app中scroll-into-view的使用

    在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串 并且子组件的上绑定一个id值用于定位 以上就是今天要讲的内容,

    2024年02月11日
    浏览(48)
  • Uni-app组件使用

    组件是 视图层的基本组成单元 。是一个单独且 可复用的功能模块的封装 。 组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。 如下举个简单的例子: uni-card  //这是开始标签 text 这是一个基础卡片示例,内容较少,此示例展示了一个没有任

    2024年02月09日
    浏览(53)
  • uni-app如何使用组件

    使用组件是uni-app的常见操作之一。以下是使用组件的步骤: 在uni-app项目中创建组件。 可以通过在components文件夹中创建一个.vue文件来创建组件。 也可以通过在HBuilderX中使用模板或向导来创建组件。 在需要使用组件的页面或组件中引入组件。 可以使用import导入组件,例如:

    2024年02月13日
    浏览(46)
  • uni-app使用websocket

    原文链接:https://blog.csdn.net/weixin_43343144/article/details/92998467

    2024年02月07日
    浏览(42)
  • uni-app--》如何制作一个APP并使用?

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月09日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包