最近接到一个项目需求，下载各种格式文件保存到手机本地
遇到的问题如下：
1、iphone手机无法保存到文件中
2、Android手机文件保存的位置不易查找
3、Android手机文件存储名称非文件原名，而是以时间戳命名
不可抗因素：
1、iphone自带的文件管理功能不能自动扫描各个APP下载的文件，需要手动保存一次才可以在文件管理器中找到
2、小程序对下载文件不友好，图片、视频可以正常下载到相册。其他格式文件Android手机只能下载其规定的文件夹中，iphone手机下载后无法无法保存
解决方法：
直接上代码
<template>
<view>
<view class="linView">
<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
<view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
<view class="load-progress-spinner text-green"></view>
<view class="dltDownLv">
<view>正在为您下载</view>
<view class="dltDownLvNew">{
{dltDownLvNew}}</view>
<view>/</view>
<view>{
{dltDownLvAll}}</view>
<view class="dltDownLvWc">已完成：</view>
<view>{
{dltDownLvWc}}</view>
</view>
</view>
</view>
<view @tap="clickPeople('下载地址')">下载</view>
</view>
</template>
<script>
export default{
data(){
return{
loadProgress: 0,//加载index
CustomBar: this.CustomBar,
dltDownLvNew:"",//已下载
dltDownLvAll:"",//总长度
dltDownLvWc:"",//完成率
downloadUlr:"",//下载地址
suffix:"",//文件后缀
}
}，
methods:{
clickPeople(e){//点击下载
let _this = this;
//下载地址
this.downloadUlr = e;
//获取地址后缀
this.suffix = e.split(".")[e.split(".").length - 1];
//判断是否为（图片或视频）
if(e.substring(e.length - 3) == "MP4" || e.substring(e.length - 3) == "mp4" || e.substring(e.length - 3) == "jpg" || e.substring(e.length - 3) == "png"){
const downloadTask = uni.downloadFile({
url:e,
success: res => {
if (res.statusCode === 200) {
if(res.tempFilePath.substring(res.tempFilePath.length - 3) == "mp4" || res.tempFilePath.substring(res.tempFilePath.length - 3) == "MP4"){//视频
//保存视频到相册
uni.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: '保存成功',
icon: 'none',
duration:2000,
mask:true
});
},
fail: function() {
this.loadProgress = 0;
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
}else{//图片
// 图片保存到手机相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'none',
duration:2000,
mask:true
});
},
fail: function() {
this.loadProgress = 0;
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
}
}else{
uni.showToast({
title:'下载失败',
icon:"none"
})
}
},
fail:(err) => {
this.loadProgress = 0;
uni.showToast({
icon:"none",
mask:true,
title:'下载失败'
})
}
});
downloadTask.onProgressUpdate((res) => {
this.loadProgress = res.progress;
if (this.loadProgress < 100) {
} else {
this.loadProgress = 0;
}
if(res.totalBytesExpectedToWrite < 10485760){
this.dltDownLvNew = Math.ceil(res.totalBytesWritten / 1024) + "KB";
this.dltDownLvAll = Math.ceil(res.totalBytesExpectedToWrite / 1024) + "KB";
this.dltDownLvWc = res.progress + "%"
}else{
this.dltDownLvNew = Math.ceil(res.totalBytesWritten / 1048576) + "M"
this.dltDownLvAll = Math.ceil(res.totalBytesExpectedToWrite / 1048576) + "M";
this.dltDownLvWc = res.progress + "%"
}
});
}else{
//下载文件为非图片和视频的文件
let _this = this;
const downloadTaskt = uni.downloadFile({
url:e,//下载地址接口返回
success:(data) => {
uni.hideLoading()
if(data.statusCode === 200){
var sFilePath = data.tempFilePath
var sFileName = _this.downloadUlr.split('/')[_this.downloadUlr.split('/').length - 1];//原来的文件名
//#ifdef APP-PLUS
//文件保存到本地
uni.saveFile({
tempFilePath: data.tempFilePath,//临时路径
success:function(res){
var savedFilePath = res.savedFilePath;
let osname = plus.os.name;
//ios手机直接打开文件，手动存储文件到手机，Android手机从根目录创建文件夹，保存文件并改名
if (osname == 'Android') {
uni.showToast({
icon:'none',
mask:true,
title:'保存成功',
duration:1000,
});
_this.fSetFileName(res.savedFilePath, sFilePath);
}
setTimeout(() => {
//打开文档查看
uni.openDocument({
filePath:res.savedFilePath,
success:function(res){
// console.log("成功打开文件")
},
fail(){
// console.log("打开文件失败")
}
})
},1000)
},
fail:function(res){
}
});
//#endif
//#ifdef MP-WEIXIN
//小程序对文件下载并不友好，不建议使用小程序当做下载器
const FileSystemManager = wx.getFileSystemManager();
FileSystemManager.saveFile({//下载成功后保存到本地
tempFilePath:data.tempFilePath,
filePath:wx.env.USER_DATA_PATH + "/" + sFileName,
success(res2){
if(res2.errMsg == 'saveFile:ok'){
// 判断手机平台是 Android 还是 IOS
if (uni.getSystemInfoSync().platform === 'android') {
// console.log('运行Android上')
uni.showModal({
title:"保存地址为",
content:"手机存储/Android/data/com.tencent.mm/MicroMsg/wxanewfiles"
})
} else {
// console.log('运行iOS上')
uni.showToast({
title:"请转移APP下载",
icon:"none"
})
}
}else{
uni.showToast({
title:"下载失败",
icon:"none"
})
}
},
fail(){
uni.showToast({
title:"下载失败",
icon:"none"
})
}
})
//#endif
}else{
this.loadProgress = 0;
uni.showToast({
icon:"none",
mask:true,
title:"下载失败"
})
}
},
fail:(err) => {
this.arcZzShow = false;
this.loadProgress = 0;
uni.showToast({
icon:"none",
mask:true,
title:"下载失败"
})
}
})
downloadTaskt.onProgressUpdate((res) => {
this.loadProgress = res.progress;
if (this.loadProgress < 100) {
} else {
this.loadProgress = 0;
}
if(res.totalBytesExpectedToWrite < 10485760){
this.dltDownLvNew = Math.ceil(res.totalBytesWritten / 1024) + "KB";
this.dltDownLvAll = Math.ceil(res.totalBytesExpectedToWrite / 1024) + "KB";
this.dltDownLvWc = res.progress + "%"
}else{
this.dltDownLvNew = Math.ceil(res.totalBytesWritten / 1048576) + "M"
this.dltDownLvAll = Math.ceil(res.totalBytesExpectedToWrite / 1048576) + "M";
this.dltDownLvWc = res.progress + "%"
}
});
}
},//点击下载END
// 给下载的文件重命名
fSetFileName(sFilePath, sFileName) {
var sFileName = sFileName.split('/')[sFileName.split('/').length - 1];//原来的文件名
var aFileUrl = sFilePath.split('/').splice(0, sFilePath.split('/').length - 1);//saveFile API保存的本地地址
var url = this.downloadUlr;//下载地址
// 'url下载地址（和上面的一样）'
let dtask = plus.downloader.createDownload(url, {
filename: "file://storage/emulated/0/AAA/" + sFileName //在手机存储更目录创建一个叫AAA的文件夹，把文件存储进去，并更改会原名
},
(d, status) => {
if (status == 200) {
let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
} else {
//下载失败
plus.downloader.clear(); //清除下载任务
}
})
dtask.start();
}
}
}
</script>
<style>
.load-progress {
pointer-events: none;
top: 0;
position: absolute;
width: 100%;
left: 0;
z-index: 2000;
}
.load-progress.hide {
display: none;
}
.load-progress .load-progress-bar {
position: relative;
width: 100%;
height: 2px;
overflow: hidden;
-webkit-transition: all 200ms ease 0s;
transition: all 200ms ease 0s;
}
.bg-green {
background-color: #ff692d;
color: #ffffff;
}
.load-progress .load-progress-spinner {
position: absolute;
top: 5px;
right: 5px;
z-index: 2000;
display: block;
}
.text-green, .line-green, .lines-green {
color: #ff692d;
}
</style>