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', // 文件的URLsuccess: 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 = typethis.$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",})}});	},// 保存视频：//下载onSaveImageClickonSaveVideoClick() {//视频保存到相册跟图片保存到相册使用方式相同//下载到本地，判断是否拥有权限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>