概览
uniapp实现多文件下载，保存到本地，因为使用的是uni.downloadFile 实现文件的下载，每次只能下载一个，需要下载多个文件，并保存到本地，并把保存的地址存储到对应的数据组中，并实现进度条显示。
需求分析
1、文件下载并保存到本地 直接使用uni.downloadFile 和uni.saveFile 两个方法既可以实现。
2、如有多个文件下载，需要异步一个一个去下载，并把保存到本地的路径赋值给传过来的数据。
3、如果使用for循环，会存存储数据混乱的情况，或者说直接保存的路径只保存到了最后一个数组对象中，无法实现保存对应的存储路径到数组。
4、进度条显示，根据下载的方法，进行监听进度返回到页面进行显示进度条的变化。
具体实现
download.js 代码
// +----------------------------------------------------------------------
// | 下载工具类
// +----------------------------------------------------------------------
import {
HTTP_REQUEST_URL
} from '@/config/app';
export const hostUrlUpLoad = HTTP_REQUEST_URL + '/upload/';
export const hostUrl = HTTP_REQUEST_URL;
import {
getStudyData,
getTestData
} from '@/api/api.js';
/**
* 下载分类相关数据
* 图片加载到本地
* @returns boolean
*/
export async function downloadClass(data, inta) {
if (data.length > 0 && inta < data.length) {
try {
const downloadTask = await uni.downloadFile({
url: data[inta].icon_path.includes('upload') ? hostUrl + data[inta].icon_path :
hostUrlUpLoad + data[inta].icon_path,
success: res => {
if (res.statusCode === 200) {
uni.saveFile({
tempFilePath: res.tempFilePath, // 下载文件的临时路径
success: saveRes => {
data[inta].icon_path = saveRes.savedFilePath
if (inta < data.length - 1) {
inta = inta + 1
downloadClass(data, inta)
} else {
uni.setStorageSync('classData', data)
}
},
fail: err => {
if (inta < data.length - 1) {
inta = inta + 1
downloadClass(data, inta)
} else {
uni.setStorageSync('classData', data)
}
}
});
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadClass(data, inta)
} else {
uni.setStorageSync('classData', data)
}
}
},
fail: err => {
if (inta < data.length - 1) {
inta = inta + 1
downloadClass(data, inta)
} else {
uni.setStorageSync('classData', data)
}
}
});
downloadTask.onProgressUpdate(resda => {})
} catch (e) {
if (inta < data.length - 1) {
inta = inta + 1
downloadClass(data, inta)
} else {
uni.setStorageSync('classData', data)
}
//TODO handle the exception
}
}
}
/**
* 下载科目数据
* 图片加载到本地
* @returns boolean
*/
export async function downloadSubject(data, inta, callBack) {
var callBackFun = callBack;
if (data.length > 0 && inta < data.length) {
try {
const downloadTask = await uni.downloadFile({
url: data[inta].icon_path.includes('upload') ? hostUrl + data[inta].icon_path :
hostUrlUpLoad + data[inta].icon_path,
success: res => {
if (res.statusCode === 200) {
uni.saveFile({
tempFilePath: res.tempFilePath, // 下载文件的临时路径
success: saveRes => {
data[inta].icon_path = saveRes.savedFilePath
if (inta < data.length - 1) {
inta = inta + 1
downloadSubject(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data, callBackFun)
requestSubjectClass(data, 0, callBackFun)
}
},
fail: err => {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubject(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
requestSubjectClass(data, 0, callBackFun)
}
}
});
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubject(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
requestSubjectClass(data, 0, callBackFun)
}
}
},
fail: err => {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubject(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
requestSubjectClass(data, 0, callBackFun)
}
}
});
downloadTask.onProgressUpdate(resda => {
callBackFun(resda.progress, false)
})
} catch (e) {
//TODO handle the exception
if (inta < data.length - 1) {
inta = inta + 1
downloadSubject(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
requestSubjectClass(data, 0, callBackFun)
}
}
}
}
/**
* 根据科目列表赋值分类数据
* @param {Object} data
* @param {Object} inta
*/
export async function requestSubjectClass(data, inta, callBack) {
const callBackFun = callBack;
if (data.length > 0 && inta < data.length) {
try {
await getStudyData(data[inta].id).then(res => {
if (res.data.code == 200 && res.data.status == 'success' && res.data.data.count > 0) {
data[inta].categoryData = res.data.data.list
if (inta < data.length - 1) {
inta = inta + 1
requestSubjectClass(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
downloadSubjectFile(data, 0, 0, callBackFun)
}
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestSubjectClass(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
downloadSubjectFile(data, 0, 0, callBackFun)
}
}
})
} catch (e) {
//TODO handle the exception
if (inta < data.length - 1) {
inta = inta + 1
requestSubjectClass(data, inta, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
downloadSubjectFile(data, 0, 0, callBackFun)
}
}
}
}
/**
* 下载文件到本地
* @returns boolean
*/
export async function downloadSubjectFile(data, inta, intaClass, callBack) {
const callBackFun = callBack;
if (data.length > 0 && inta < data.length) {
if (data[inta].categoryData.length > 0 && intaClass < data[inta].categoryData.length) {
try {
var filePath = ''
if (data[inta].categoryData[intaClass].file_path.includes('upload')) {
if (data[inta].categoryData[intaClass].file_path.charAt(0) == '/') {
filePath = hostUrl + data[inta].categoryData[intaClass].file_path
} else {
filePath = "http://" + data[inta].categoryData[intaClass].file_path
}
} else {
filePath = hostUrlUpLoad + data[inta].categoryData[intaClass].file_path
}
const downloadTask = await uni.downloadFile({
url: filePath,
success: res => {
if (res.statusCode === 200) {
uni.saveFile({
tempFilePath: res.tempFilePath, // 下载文件的临时路径
success: saveRes => {
data[inta].categoryData[intaClass].file_path = saveRes.savedFilePath
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
downloadSubjectFile(data, inta, intaClass,callBackFun)
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubjectFile(data, inta, 0, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
callBackFun(100, true)
}
}
},
fail: err => {
console.log("保存文件失败 ")
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
downloadSubjectFile(data, inta, intaClass,
callBackFun)
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubjectFile(data, inta, 0, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
callBackFun(100, true)
}
}
}
});
} else {
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
downloadSubjectFile(data, inta, intaClass, callBackFun)
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubjectFile(data, inta, 0, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
callBackFun(100, true)
}
}
}
},
fail: err => {
console.log("下载失败 fail ")
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
downloadSubjectFile(data, inta, intaClass, callBackFun)
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubjectFile(data, inta, 0, callBackFun)
} else {
uni.setStorageSync('SubjectData', data)
callBackFun(100, true)
}
}
}
});
downloadTask.onProgressUpdate(resda => {
callBackFun(resda.progress, false)
})
} catch (e) {
//TODO handle the exception
console.log("downloadSubjectFile catch " + JSON.stringify(e))
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
downloadSubjectFile(data, inta, intaClass, callBackFun)
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubjectFile(data, inta, 0, callBackFun)
} else {
console.log("打印保存的科目数据 downloadSubjectFile " + JSON.stringify(data))
uni.setStorageSync('SubjectData', data)
callBackFun(100, true)
}
}
}
} else {
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
downloadSubjectFile(data, inta, intaClass, callBackFun)
} else {
if (inta < data.length - 1) {
inta = inta + 1
downloadSubjectFile(data, inta, 0, callBackFun)
} else {
console.log("打印保存的科目数据 downloadSubjectFile " + JSON.stringify(data))
uni.setStorageSync('SubjectData', data)
callBackFun(100, true)
}
}
}
}
}
/**
* 根据科目列表获取题库
* @param {Object} subjectData
*/
export async function requestSubjectTestData(subjectData) {
try {
await getTestData(subjectData.id).then(res => {
if (res.data.code == 200 && res.data.status == 'success') {
uni.removeStorageSync('CNLLIST' + subjectData.id)
uni.removeStorageSync('CNLLISTCOUNT' + subjectData.id)
uni.removeStorageSync('ENLLIST' + subjectData.id)
uni.removeStorageSync('ENLLISTCOUNT' + subjectData.id)
uni.setStorageSync('CNLLIST' + subjectData.id, res.data.data.list)
uni.setStorageSync('CNLLISTCOUNT' + subjectData.id, res.data.data.count)
uni.setStorageSync('ENLLIST' + subjectData.id, res.data.data.english_list)
uni.setStorageSync('ENLLISTCOUNT' + subjectData.id, res.data.data.english_count)
} else {
uni.removeStorageSync('CNLLIST' + subjectData.id)
uni.removeStorageSync('CNLLISTCOUNT' + subjectData.id)
uni.removeStorageSync('ENLLIST' + subjectData.id)
uni.removeStorageSync('ENLLISTCOUNT' + subjectData.id)
}
})
} catch (e) {
console.log('报错信息 ' + JSON.stringify(subjectData.id))
//TODO handle the exception
}
}
/**
* 根据科目列表赋值分类数据
* @param {Object} data
* @param {Object} inta
*/
export async function requestSubjectClassSize(data, inta, callBack) {
if (data.length > 0 && inta < data.length) {
try {
await getStudyData(data[inta].id).then(res => {
if (res.data.code == 200 && res.data.status == 'success' && res.data.data.count > 0) {
data[inta].categoryData = res.data.data.list
if (inta < data.length - 1) {
inta = inta + 1
requestSubjectClassSize(data, inta, callBack)
} else {
requestDownloadFileSize(data, 0, 0,0, callBack)
}
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestSubjectClassSize(data, inta, callBack)
} else {
requestDownloadFileSize(data, 0, 0,0, callBack)
}
}
})
} catch (e) {
//TODO handle the exception
if (inta < data.length - 1) {
inta = inta + 1
requestSubjectClassSize(data, inta, callBack)
} else {
requestDownloadFileSize(data, 0, 0,0, callBack)
}
}
}
}
/**
* 下载文件总大小
* @returns boolean
*/
export async function requestDownloadFileSize(data, inta, intaClass, contentLength, callBack) {
if (data.length > 0 && inta < data.length) {
if (data[inta].categoryData.length > 0 && intaClass < data[inta].categoryData.length) {
try {
var filePath = ''
if (data[inta].categoryData[intaClass].file_path.includes('upload')) {
if (data[inta].categoryData[intaClass].file_path.charAt(0) == '/') {
filePath = hostUrl + data[inta].categoryData[intaClass].file_path
} else {
filePath = "http://" + data[inta].categoryData[intaClass].file_path
}
} else {
filePath = hostUrlUpLoad + data[inta].categoryData[intaClass].file_path
}
await uni.request({
url: filePath,
method: 'head',
// responseType: 'arraybuffer', // 或者其他如'text'、'blob'等，取决于你需要的内容类型
// header: {
// 'Accept-Encoding': 'gzip, deflate'
// },
success(res) {
if (res.statusCode === 200) {
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
if(res.header['Content-Length'] || res.header['content-length']){
console.log("filePath " + filePath + ' ' + JSON.stringify(res.header['Content-Length']))
contentLength = contentLength + parseInt(res.header['Content-Length']?res.header['Content-Length']:res.header['content-length'],10); // 获取Content-Length字段的值
}
requestDownloadFileSize(data, inta, intaClass,contentLength,callBack)
} else {
if (inta < data.length - 1) {
inta = inta + 1
if(res.header['Content-Length'] || res.header['content-length']){
contentLength = contentLength + parseInt(res.header['Content-Length']?res.header['Content-Length']:res.header['content-length'],10); // 获取Content-Length字段的值
}
requestDownloadFileSize(data, inta, 0,contentLength, callBack)
} else {
callBack(contentLength)
}
}
} else {
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
requestDownloadFileSize(data, inta, intaClass,contentLength, callBack)
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestDownloadFileSize(data, inta, 0,contentLength, callBack)
} else {
callBack(contentLength)
}
}
}
},
error(err) {
console.error('请求错误:', err);
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
requestDownloadFileSize(data, inta, intaClass,contentLength, callBack)
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestDownloadFileSize(data, inta, 0,contentLength, callBack)
} else {
callBack(contentLength)
}
}
},
networkTimeout: 5000, // 设置超时时间
timeout: 5000 // 设置整体请求超时时间
})
} catch (e) {
//TODO handle the exception
console.log("requestDownloadFileSize catch " + JSON.stringify(e))
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
requestDownloadFileSize(data, inta, intaClass,contentLength, callBack)
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestDownloadFileSize(data, inta, 0,contentLength, callBack)
} else {
callBack(contentLength)
}
}
}
} else {
if (intaClass < data[inta].categoryData.length - 1) {
intaClass = intaClass + 1
requestDownloadFileSize(data, inta, intaClass,contentLength, callBack)
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestDownloadFileSize(data, inta, 0,contentLength, callBack)
} else {
callBack(contentLength)
}
}
}
}
}
/**
* @param {Object} data
* @param {Object} inta
* @param {Object} contentLength
* @param {Object} callBack
*/
export async function requestFileSize(data, inta, contentLength, callBack) {
if (data.length > 0 && inta < data.length) {
try {
uni.request({
url: downloadUrl,
method: 'GET',
responseType: 'arraybuffer', // 或者其他如'text'、'blob'等，取决于你需要的内容类型
header: {
'Accept-Encoding': 'gzip, deflate'
},
success(res) {
if (res.statusCode === 200 && res.data) {
if (inta < data.length - 1) {
inta = inta + 1
if(res.header['Content-Length'] || res.header['content-length']){
contentLength = contentLength + parseInt(res.header['Content-Length']?res.header['Content-Length']:res.header['content-length'],10); // 获取Content-Length字段的值
}
console.log(contentLength + ' 字节');
requestFileSize(data, inta, contentLength, callBack)
} else {
callBack(contentLength)
}
} else {
if (inta < data.length - 1) {
inta = inta + 1
requestFileSize(data, inta, contentLength, callBack)
} else {
callBack(contentLength)
}
}
},
error(err) {
console.error('请求错误:', err);
if (inta < data.length - 1) {
inta = inta + 1
requestFileSize(data, inta, contentLength, callBack)
} else {
callBack(contentLength)
}
},
networkTimeout: 5000, // 设置超时时间
timeout: 5000 // 设置整体请求超时时间
});
} catch (e) {
//TODO handle the exception
if (inta < data.length - 1) {
inta = inta + 1
requestFileSize(data, inta, contentLength, callBack)
} else {
callBack(contentLength)
}
}
}
}
export default {
downloadClass,
downloadSubject,
requestSubjectTestData,
requestDownloadFileSize,
requestSubjectClassSize
};实现的逻辑是，下载完成一个文件，然后把保存到本地的路径存储到传过来对应的数据中，把原来线上的文件地址替换为本地路径，然后在进行下一个。
进度条显示
<template>
<view style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: relative;">
<view style="position: absolute;top: 80rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
<image src="../../static/kaoshilogo.png" style="width: 80rpx;" mode="widthFix"></image>
<view style="margin-top: 20rpx;font-family: Source Han Sans-Bold;font-size: 18rpx;">{{language.AppName}}</view>
</view>
<view style="position: absolute;bottom: 30rpx;width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
<view style="width: 60%;font-size: 8rpx;text-align: center;margin-bottom: 3rpx;">{{language.zhengzaigengxinziliao}}</view>
<view class="progress-bar">
<view class="progress-bar__fill" :style="{width: progress}"></view>
</view>
</view>
</view>
</template>
<script>
import {
getSubjectData,
getClassData,
getList,
uploadStudyTime,
uploadTestData,
uploadOpen
} from '@/api/api.js'
export default {
data() {
return {
fileManager: null,
openData: [],
progress: '',
language: getApp().globalData.language,
}
},
onLoad() {
this.uploadOpen()
//获取总分类数据
if (!uni.getStorageSync("classData")) {
this.getClassDataPage()
}
//获取科目数据
if (!uni.getStorageSync("SubjectData")) {
this.getSubjectDataPage()
}else{
if(uni.getStorageSync('userInfo')){
uni.switchTab({
url: '/pages/home/home'
})
}else{
uni.navigateTo({
url: '/pages/login/login'
})
}
}
if(uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').userName != 'Guest'){
if(uni.getStorageSync('uploadTime')){
this.uploadSyudyTime()
}
if(uni.getStorageSync('uploadTestTime')){
this.uploadTestTime()
}
}
},
methods: {
async getClassDataPage(){
var that = this
await getClassData().then(res => {
if (res.data.code == 200 && res.data.status == 'success') {
that.$download.downloadClass(res.data.data.list, 0)
} else if (res.statusCode == '404' || res.status == 1) {
console.log("网路请求失败")
} else {
console.log(res)
}
})
},
async getSubjectDataPage(){
var that = this
await getSubjectData().then(res => {
if (res.data.code == 200 && res.data.status == 'success') {
if(res.data && res.data.data && res.data.data.list && res.data.data.list.length > 0){
for (var i = 0; i < res.data.data.list.length; i++) {
this.$download.requestSubjectTestData(res.data.data.list[i]);
}
this.$download.downloadSubject(res.data.data.list, 0,function(progress,boobleTo){
that.progress = progress + "%"
if(boobleTo){
getApp().globalData.version = '1.0.' + that.$utils.formatDateTime()
if(uni.getStorageSync('userInfo')){
uni.switchTab({
url: '/pages/home/home'
})
}else{
uni.navigateTo({
url: '/pages/login/login'
})
}
}
});
}else{
if(uni.getStorageSync('userInfo')){
uni.switchTab({
url: '/pages/home/home'
})
}else{
uni.navigateTo({
url: '/pages/login/login'
})
}
}
} else if (res.statusCode == '404' || res.status == 1) {
console.log("网路请求失败")
uni.showToast({
title: that.language.startToastnetworkMsg,
icon: 'none',
duration: 1500
})
if(uni.getStorageSync('userInfo')){
uni.switchTab({
url: '/pages/home/home'
})
}else{
uni.navigateTo({
url: '/pages/login/login'
})
}
} else {
uni.showToast({
title: that.language.startToastnetworkMsg,
icon: 'none',
duration: 1500
})
if(uni.getStorageSync('userInfo')){
uni.switchTab({
url: '/pages/home/home'
})
}else{
uni.navigateTo({
url: '/pages/login/login'
})
}
}
})
},
async uploadSyudyTime(){
await uploadStudyTime({"data": uni.getStorageSync('uploadTime')}).then(res=>{
if(res.data.code == 200 && res.data.status == 'success'){
uni.removeStorageSync('uploadTime')
}
})
},
async uploadTestTime(){
await uploadTestData({"data": uni.getStorageSync('uploadTestTime')}).then(res=>{
if(res.data.code == 200 && res.data.status == 'success'){
uni.removeStorageSync('uploadTestTime')
}
})
},
async uploadOpen(){
this.openData = [];
if(uni.getStorageSync('uploadOpen')){
this.openData = uni.getStorageSync('uploadOpen')
this.openData.push({"date": this.$utils.formatDateTime()})
}else{
this.openData[0] = {"date": this.$utils.formatDateTime()}
}
await uploadOpen({"data": this.openData}).then(res=>{
if(res.data.code == 200 && res.data.status == 'success'){
uni.removeStorageSync('uploadOpen')
}else{
uni.setStorageSync('uploadOpen',this.openData)
}
})
}
}
}
</script>
<style>
page{
width: 100%;
height: 100vh;
}
.progress-bar {
background-color: #cccccc; /* 进度条背景颜色 */
height: 10rpx;
width: 60%;
border-radius: 5rpx;
}
.progress-bar__fill {
height: 100%;
background-color: green; /* 完成部分的颜色 */
transition: width 0.1s ease-in-out; /* 平滑过渡效果 */
border-radius: 5rpx;
}
</style>
有部分不需要的代码，可以自己删除掉即可。