Uniapp上传下载文件-不限制文件类型-附详细代码解析

Uniapp上传下载文件，不限制文件类型

  • 1 知识小课堂
    • 1.1 Uniapp简介
    • 1.2 文件上传
    • 1.3 文件下载
  • 2 Uniapp上传文件
  • 3 Uniapp 下载文件

1 知识小课堂

1.1 Uniapp简介

在这里插入图片描述

UniApp是一款跨平台应用程序开发框架，它允许开发者使用同一套代码来构建基于多个操作系统的应用程序，包括iOS、Android、H5以及小程序等。

UniApp基于Vue.js框架，在统一的API和组件规范下，提供了类似原生应用的开发体验。这意味着开发者只需编写一套代码，就可以将应用程序发布到多个平台，从而大大减少了开发和维护的工作量。

1.2 文件上传

在uni-app中，常用的文件上传工具有uni-file-picker和uni.uploadFile()。

uni-file-picker是uni-app封装上传图片和文件的组件，它支持从本地选择文件或使用相机拍摄。使用uni-file-picker，你可以选择任意类型的文件进行上传，包括图片、视频、文档等。

另外，uni.uploadFile()是uni-app为了弥补原生uni.request缺陷，可以直接写文挡服务器地址。它主要用于上传文件，也支持同时上传多个文件。你可以通过设置上传文件的参数，包括文件类型、文件大小、文件名等，来控制上传的行为。

1.3 文件下载

在uni-app中，文件下载是一个常见的需求。为了满足这个需求，开发者们常常使用uni.downloadFile()这个方法。这个方法非常实用，它可以从指定的URL下载文件，并在下载完成后，返回文件的本地路径。这对于需要下载文件并在应用中使用的场景非常有用。

下面是一个使用uni.downloadFile()方法的示例：

uni.downloadFile({
    url: 'https://example.com/file.txt', // 文件的URL
    success: function (res) {
        console.log('下载成功', res);
        // 在这里可以处理文件下载后的操作，比如保存到本地、读取文件内容等
    },
    fail: function (err) {
        console.log('下载失败', err);
        // 在这里可以处理文件下载失败的情况，比如重新下载、提示用户等
    }
});

在上述代码中，我们首先定义了文件的URL，然后调用了uni.downloadFile()方法来下载文件。在成功回调函数中，我们可以处理文件下载后的操作，比如保存到本地、读取文件内容等。在失败回调函数中，我们可以处理文件下载失败的情况，比如重新下载、提示用户等。

需要注意的是，uni.downloadFile()方法默认会将文件保存在应用的临时目录下。如果需要将文件保存到应用的本地目录下，可以在下载文件的URL后面添加一个自定义的路径。例如：

uni.downloadFile({
    url: 'https://example.com/file.txt?path=/my/custom/path/', // 文件的URL，包含自定义路径
    success: function (res) {
        console.log('下载成功', res);
        // 在这里可以处理文件下载后的操作，比如保存到本地、读取文件内容等
    },
    fail: function (err) {
        console.log('下载失败', err);
        // 在这里可以处理文件下载失败的情况，比如重新下载、提示用户等
    }
});

在上述代码中，我们在文件的URL后面添加了一个自定义的路径/my/custom/path/。这样，文件就会被保存在应用的/my/custom/path/目录下。

2 Uniapp上传文件

模板部分

<view class="example-body">
	<uni-file-picker v-model="fileLists" :list-styles="listStyles"  file-mediatype="all"  @select="fj_select"  mode="list" @delete="fj_delete" @progress="fj_progress" @success="fj_success" @fail="fj_fail"></uni-file-picker>
</view>

//上传附件
	fj_select(fj_select_data){
		let that = this;
		// console.log("dizhi ",fj_select_data.tempFiles[0].file.name)
		let upload_name = fj_select_data.tempFiles[0].file.name;
		// console.log("选择附件-----",fj_select_data);
		this.upload_qtwj(fj_select_data,upload_name);		
		// this.upload_name()
	
	},

//2.其他文书上传
	upload_qtwj(file_path,upload_name){
		let that = this;
		// console.log("准备上传：",file_path);
		// console.log("获取的名字",upload_name)
		const tempFilePaths = file_path.tempFilePaths;
		uni.uploadFile({
			url: sys_config.ruoyi_root+'common/uploadName',
			header: {
				'Authorization': 'Bearer '+uni.getStorageSync('token') //请求头信息
			},
			filePath:tempFilePaths[0],
			name: 'file',
			// formData:{'name':'c测试'},
			formData:{'name':upload_name},
			success: (uploadFileRes) => {
				let json_data= JSON.parse(uploadFileRes.data)
				console.log("上传完成：",json_data);
				that.book_qtwj_arr_edit.push({'url':sys_config.ruoyi_root+json_data.fileName})
				that.book_selectwj_arr.push(json_data.fileName)
				that.book_form.qtwj = that.book_selectwj_arr.toString();
				// console.log('当前文件全路径：',that.book_qtwj_arr_edit)
				console.log('当前文件相对路径：',that.book_selectwj_arr)
				// console.log('上传的附件：',that.book_form.qtwj)	
				
			}
		});
	},

3 Uniapp 下载文件

完整的下载过程

<template>
	<view class="main">
		<view class="img_box" style="width:100%; height: 80%;">			
			<image style="width:90%; height: 100%; background-color: #FFFFFF;" :mode="aspectFit" :src="img_src" @error="imageError" ></image>
			<!-- <web-view :webview-styles="webviewStyles" :src="qtwj_src" @error="filesError" @message="getmessage"  @onPostMessage="handlePostMessage" @load="webViewLoad" ></web-view> -->
		</view>
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="保存" title="保存附件" content="将附件保存至手机" @confirm="onSaveFilesClick(qtwj_src)" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<view class="btn_box">
			<button class="big_btn" @click="dialogToggle('info')" type="primary"><uni-icons type="download" size="18" color="#FFFFFF"></uni-icons> 下载</button>
			<button class="big_btn" @click="goto_previous()"><uni-icons type="back" size="18" color="#333"></uni-icons> 返回</button>
		</view>
	</view>
</template>

<script>
import sys_config from '../../common/sys_config.js';	
export default {
	data() {
		return {
			img_src:"/static/custom/book/附件文档.png",
			qtwj_src:"",
			filesError:"Error",
			webviewStyles:{
				progress: {
					color: '#FF3333',
				},
			}
		}
	},
	onLoad: function (options) {
		console.log('其他附件预览：',options);
		this.qtwj_src = options.qtwj_view;		
	},
	methods: {
		goto_previous(){
			wx.navigateBack({
				delta: 1
			});
		},
		
		dialogToggle(type) {
			this.msgType = type
			this.$refs.alertDialog.open()
		},	

		dialogClose() {
			wx.showToast({
				title: '取消保存',
				duration: 2000,
				mask: true,
				icon: "error",
			});
		},
		webViewLoad(){
			wx.showToast({
				title: '加载成功',
				duration: 2000,
				mask: true,
				icon: "success",
			});
		},
		webViewEerror(data){
			
			wx.showToast({
				title: '加载失败',
				duration: 2000,
				mask: true,
				icon: "error",
			});
		},
		getmessage(e){
			console.log("页面接受的信息",e)
		},
		goToEdge(){
			uni.navigateTo({ 
				url: 'plugin://NativePlugin/webview?url=http://www.uniapp.com' 
			})
		},
		// webview向外部发送消息
		handlePostMessage: function(data) {
			console.log("接收到消息：" + JSON.stringify(data.detail));
		},
		// 点击下载按钮实现文件的下载：
		onSaveFilesClick(file){
			let acceptArr = ["JPG", "PNG", "JPEG"];
			let videoFiles = "MP4";
			let rarfiles = "RAR";
			const fileSuffix = file.substring(file.lastIndexOf(".") + 1).toUpperCase();		
			//加载框动画
			uni.showLoading({ title: '正在下载……' });	
			uni.downloadFile({ //只能是GET请求
				url: file, //请求地址(后台返回的码流地址)
				success: (res) => {
					// console.log("请求地址(后台返回的码流地址res",res);
					//下载成功
					if (res.statusCode === 200) {
						uni.hideLoading();   //隐藏加载框
						//保存文件
						var tempFile = res.tempFilePath;
						// console.log(tempFile, res, 'tempFilePath');
						if (acceptArr.indexOf(fileSuffix) >= 0) {
							this.onSaveImageClick();
						} else if(videoFiles.indexOf(fileSuffix) >= 0){
							// console.log("视频")
							this.onSaveVideoClick();
						}else if(rarfiles.indexOf(fileSuffix) >= 0){
							// console.log("rar")
							this.onSaveRarClick(file);
						}else {
							console.log('文件');
							//保存成功之后 打开文件
							uni.openDocument({
								filePath: tempFile,
								showMenu: true, //微信小程序 downloadFile生成的tempFilePath为临时路径无法直接保存到手机 显示菜单设置可以手动保存到手机本地
								fail: (e) => {
									console.log(e, '打开失败');
									let nowEno = uni.getSystemInfoSync().platform; //当前环境
									console.log(e, '打开失败', nowEno)
									if (nowEno == 'ios') { //ios打开临时路径文件失败 设置ios环境下读取临时路径文件可以打开
										uni.getFileSystemManager().readFile({
											filePath: tempFile,
											success: res => {
												console.log("filebuffer",res);
												var filebuffer = res.data;
												return filebuffer;
											},
											fail: console.error,
										})
									} else {
										uni.showToast({
											title: '打开失败',
											icon: "error",
										})
									}			
								}
							})			
						}
					}
				},
				fail: (e) => {
					console.log(e, '文件下载失败')
					uni.showToast({
						title: '文件下载失败',
						icon: "error",
					})
				}
			});	
		},
		
		// 保存视频：
		//下载onSaveImageClick
		onSaveVideoClick() {
			//视频保存到相册跟图片保存到相册使用方式相同
			//下载到本地，判断是否拥有权限
			wx.getSetting({
				withSubscriptions: true,
				success: res => {
					console.info("res.authSetting",res.authSetting);
					if (res.authSetting['scope.writePhotosAlbum']) {
						wx.downloadFile({
							url: this.qtwj_src,
							success: res => {
								//保存到相册
								wx.saveVideoToPhotosAlbum({
									filePath: res.tempFilePath,
									success: res => {
										console.info("视频保存到相册",res);	                                
										wx.showToast({
											title: '视频保存到相册',
											icon:'success'										
										})
									},
									fail: res => {
										wx.showToast({
											title: '保存失败',
											icon:'error'										
										})
									}
								})
							}
						});
					} else {
						wx.showModal({
							cancelColor: 'cancelColor',
							title: '提示',
							content: '请开启相册访问权限',
							success: res => {									
								if (res.confirm){
									wx.openSetting({
										withSubscriptions: true,
									})
								}									
							}
						})
					}
				}
			})
		},
		
		// 保存rar压缩包等
		onSaveRarClick(tempfilePath){
			console.log("rar来了",tempfilePath);
			let rootPath = wx.env.USER_DATA_PATH;
			let cachePath = rootPath+"/cache";
			console.log("rootPath",rootPath);
			console.log("cachePath",cachePath)
			const fs = wx.getFileSystemManager();
			fs.readZipEntry({
			  filePath: this.qtwj_src,
			  entries: 'all',
			  encoding: 'utf-8', // 统一指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
			  success(res) {
				console.log("保存成功",res);
			    console.log("存rar压缩包",res);
			    // res.entries === {
			    //     'some_folder/my_file.txt': {
			    //         errMsg: 'readZipEntry:ok',
			    //         data: 'xxxxxx'
			    //     },
			    //     'other_folder/orther_file.txt': {
			    //         errMsg: 'readZipEntry:ok',
			    //         data: 'xxxxxx'
			    //     }
			    //  }
			  },
			  fail(res) {
			    console.log("保存失败",res);
				// this.cunQu();
			  },
			});
		},
		
		// 保存图片
		onSaveImageClick() {
			let that = this;
			wx.getSetting({
				success(res) {
					// 如果已授权
					console.log("获取授权",res)
					if (res.authSetting['scope.writePhotosAlbum']) {
						that.bindseaveimage();
					// 如果没有授权 
					} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
						// 调起用户授权
						wx.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								that.bindseaveimage();
							},
							fail() {
								wx.showToast({
									title: '您没有授权，无法保存到相册',
									icon:'error'
							
								})
							}
						})
					// 如果之前授权已拒绝
					} else {
						wx.openSetting({
							success(res) {
								if (res.authSetting['scope.writePhotosAlbum']) {
									that.bindseaveimage();
								} else {
									wx.showToast({
										title: '您没有授权，无法保存到相册',
										icon:'error'									
									})
								}
							}
						})
					}
				}
			});
		},
		
		// 图片具体保存方法
		bindseaveimage:function(){
			wx.getImageInfo({
				src: this.qtwj_src,
				success: function (ret) {
					var path = ret.path;
					wx.saveImageToPhotosAlbum({
						filePath: path,
						success(result) {
							// console.log("成功");
							wx.hideLoading();
							wx.showToast({
								title: '保存成功',
								duration: 2000,
								mask: true,							
							});
						},
						fail(result) {
							wx.showToast({
								title: '失败,你取消了操作',
								duration: 2000,
								icon: 'error',
							});
							// console.log("失败,你取消了",JSON.stringify(result))
							// console.log(path);
							wx.openSetting({
								success: (res) => {
									// console.log(res);
								}
							})
						}
					});
				}
			});
		}
	},
	//初始化
	mounted () {
		
	}
}
</script>

<style scoped>
.main {flex-direction: column;align-items: center;justify-content: center;height:1000rpx;}
.img_box{width:90%;height:90%;padding:5%}

.btn_box{width: 100%;padding-bottom: 30rpx;position: fixed;background-color: #FFFFFF;bottom: 0;box-shadow: 0 5px 5px 4px rgba(0, 0, 0, .5);}
.btn_box .big_btn{margin-top:20rpx;width:80%}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

以低成本实现高转化：搭建年入百万的知识付费网站的技巧与方法

以低成本实现高转化：搭建年入百万的知识付费网站的技巧与方法

明理信息科技知识付费平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一大挑战。…
阅读更多...
Ubuntu 常用命令之 cat 命令用法介绍

Ubuntu 常用命令之 cat 命令用法介绍

cat是一个常用的命令行工具&#xff0c;它用于连接和显示文件的内容。cat这个名字来源于它的功能 - concatenate(连接)。 以下是cat命令的一些基本用法 &#x1f447;显示文件内容&#xff1a;cat后面跟上文件名&#xff0c;就可以在终端显示出文件的内容。例如&#xff0c;c…
阅读更多...
3分钟让你学会axios在vue项目中的基本用法（建议收藏）

3分钟让你学会axios在vue项目中的基本用法（建议收藏）

目录 Axios Axios简介 一、axios是干啥的 二、安装使用 三、Axios请求方式 1、axios可以请求的方法&#xff1a; 2、get请求 3、post请求 4、put和patch请求 5、delete请求 6、并发请求 四、Axios实例 1、创建axios实例 2、axios全局配置 3、axios实例配置 4、…
阅读更多...
Swift爬虫采集唯品会商品详情

Swift爬虫采集唯品会商品详情

我有个朋友之前在唯品会开的店&#xff0c;现在想转战其他平台&#xff0c;想要店铺信息商品信息全部迁移过去&#xff0c;如果想要人工手动操作就有点麻烦了&#xff0c;然后有天找到我 &#xff0c;让我看看能不能通过技术手段实现商品信息迁移。嫌来无事&#xff0c;写了下面…
阅读更多...
【华为】文档中命令行约定格式规范（命令行格式规范、命令行行为规范、命令行参数格式、命令行规范）

【华为】文档中命令行约定格式规范（命令行格式规范、命令行行为规范、命令行参数格式、命令行规范）

文章目录 命令行约定格式**粗体&#xff1a;命令行关键字***斜体&#xff1a;命令行参数*[ ]&#xff1a;可选配置{ x | y | ... } 和 [ x | y | ... ]&#xff1a;选项{ x | y | ... }* 和 [ x | y | ... ]*&#xff1a;多选项&<1-n>&#xff1a;重复参数#&#xff…
阅读更多...
ROS-tf2功能包安装

ROS-tf2功能包安装

首先使用 rospack find tf2_tools 查看是否安装了 tf2_tools&#xff0c;如果没有则安装 但直接采用 sudo apt install tf2_tools 是无法安装成功的&#xff0c;会显示 E: 无法定位软件包 tf2_tools 使用下面的命令安装 sudo apt install ros-melodic-tf2-tools&#xff08;…
阅读更多...
区域和检索算法(leetcode第303题)

区域和检索算法(leetcode第303题)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;处理以下类型的多个查询:计算索引 left 和 right &#xff08;包含 left 和 right&#xff09;之间的 nums 元素的 和 &#xff0c;其中 left < right 实现 NumArray 类&#xff1a;NumArray(int[] nums) 使用数组…
阅读更多...
关于车轮螺母的拧紧力矩——SunTorque智能扭矩系统

关于车轮螺母的拧紧力矩——SunTorque智能扭矩系统

车轮螺母是汽车的重要部件之一&#xff0c;其拧紧力矩的大小直接影响到车辆的安全性和稳定性。因此&#xff0c;开发一种准确、可靠的车轮螺母拧紧力矩计算方法对于提高汽车制造质量具有重要意义。SunTorque智能扭矩系统将从车轮螺母拧紧力矩的开发和计算两个方面进行探讨。 一…
阅读更多...
单元测试计划、用例、报告、评审编制模板

单元测试计划、用例、报告、评审编制模板

单元测试支撑文档编制模板&#xff0c;具体文档如下&#xff1a; 1. 单元测试计划 2. 单元测试用例 3. 单元测试报告 4. 编码及测试评审报告 软件项目相关资料全套获取&#xff1a;软件项目开发全套文档下载-CSDN博客 1、单元测试计划 2、单元测试用例 3、单元测试报告 4、编码…
阅读更多...
售前解决方案工程师在项目到底有多大价值？

售前解决方案工程师在项目到底有多大价值？

售前解决方案工程师在项目中的价值是非常重要的&#xff0c;虽然其具体价值难以量化&#xff0c;但可以从以下几个方面来体现&#xff1a; 1、提升项目成功率&#xff1a;售前工程师在项目初期就能够深入了解客户需求&#xff0c;通过技术交流、解决方案设计等方式&#xff0c;…
阅读更多...
数字滤波器设计——Matlab实现数字信号处理＜1＞

数字滤波器设计——Matlab实现数字信号处理＜1＞

目录 一.实验内容 二.代码分析 1.信号产生部分 2.利用傅立叶级数展开的方法&#xff0c;自由生成所需的x(t) 3.通过选择不同的采样间隔T&#xff08;分别选T>或<1/2fc&#xff09;&#xff0c;从x(t)获得相应的x(n) 3.对获得的不同x(n)分别作傅立叶变换&#xff0c…
阅读更多...
LeedCode刷题---二分查找类问题

LeedCode刷题---二分查找类问题

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、二分查找 题目链接&#xff1a;二分查找 题目描述 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一…
阅读更多...
刚入行的嵌入式新人是否值得坚持嵌入式方向？

刚入行的嵌入式新人是否值得坚持嵌入式方向？

今日话题&#xff0c;刚入行的嵌入式新人是否值得坚持嵌入式方向&#xff1f;如果你正在学习C语言或者嵌入式方向&#xff0c;坚持下去是一个明智的选择。嵌入式行业涉及硬件&#xff0c;技术更新相对较慢&#xff0c;但这为你积累宝贵的经验提供了机会&#xff0c;与纯软件相比…
阅读更多...
JVM日常故障排查小结

JVM日常故障排查小结

前置知识 jstack简介 jstack是JVM自带的工具&#xff0c;用于追踪Java进程线程id的堆栈信息、锁信息&#xff0c;或者打印core file&#xff0c;远程调试Java堆栈信息等。 而我们常用的指令则是下面这条: # 打印对应java进程的堆栈信息 jstack [ option ] pid option常见选…
阅读更多...
基于JAVA的天然气工程运维系统 开源项目

基于JAVA的天然气工程运维系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程 12.2.2 流程 22.3 各角色功能2.3.1 系统管理员功能2.3.2 用户服务部功能2.3.3 分公司&#xff08;施工单位&#xff09;功能2.3.3.1 技术员角色功能2.3.3.2 材料员角色功能 2.3.4 安…
阅读更多...
SpringBoot之三层架构的详细解析

SpringBoot之三层架构的详细解析

3. 分层解耦 3.1 三层架构 3.1.1 介绍 在我们进行程序设计以及程序开发时&#xff0c;尽可能让每一个接口、类、方法的职责更单一些&#xff08;单一职责原则&#xff09;。 单一职责原则&#xff1a;一个类或一个方法&#xff0c;就只做一件事情&#xff0c;只管一块功能。…
阅读更多...
测试用例的修改更新

测试用例的修改更新

测试用例的修改更新是指测试过程中由于用户需求的改变&#xff0c;或者测试过程中发现有新的需求产生&#xff0c;使得测试用例需要进行修改。修改更新测试用例不仅是一种测试技术&#xff0c;更是一种质量保证的方法。但修改和更新测试用例的技术要点在于&#xff1a; 1、执行…
阅读更多...
【数据结构】八大排序之直接插入排序算法

【数据结构】八大排序之直接插入排序算法

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.直接插入排序简介及思路 直接插入排序(Straight Insertion Sort)是一种简单直观的插入排序算法. 它的基本操作是: 将一个数据插入到已经排好的有序表中,从而得到一个新的,数…
阅读更多...
Spring 原理（一）

Spring 原理（一）

Spring 原理 它是一个全面的、企业应用开发一站式的解决方案&#xff0c;贯穿表现层、业务层、持久层。但是 Spring仍然可以和其他的框架无缝整合。 Spring 特点 轻量级控制反转面向切面容器框架集合 Spring 核心组件 Spring 常用模块 Spring 主要包 Spring 常用注解 bean …
阅读更多...
【期末复习向】走进循环神经网络系列-RNN，LSTM，GRU

【期末复习向】走进循环神经网络系列-RNN，LSTM，GRU

RNN 上篇文章复习了最简单的神经网络MLP&#xff0c;它是由输入层&#xff0c;隐藏层和输出层构成的。当然这也是所有神经网络最基本的架构。但是MLP过于简单&#xff0c;存在的问题之一就是无法考虑全局的信息&#xff0c;也就是前后输入的信息&#xff0c;这对于解决时间序列…
阅读更多...
最新文章

Copyright @ 2022~2023