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>