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>
# uni-app
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue