uniapp移动端文件下载，并保存到手机本地存储空间

uniapp移动端文件下载，并保存到手机本地存储空间（踩坑）

作为一个后端玩家，自学前端其实还是花了很多时间去研究。耗时也是花在这里。
先祝大家程序员节快乐，哈哈！必须要好好撸代码！

下载进度条更新啦：见我另外一个博客：uniapp移动端文件下载之进度条

1.用法以及思路（直接上代码）

1.1 如果是需要鉴权的后端接口

//如果后端接口地址需要鉴权，参考设置请求头
		downlocadAnsSaveThree(){
			const dtask = plus.downloader.createDownload(this.address,
			{
				filename: this.filePath
			}, (res, status) => {
			  if (status === 200) {
			    console.log(res.filename)
			  }else{
				console.error("Download failed: " + status);
			  }
			})
			dtask.setRequestHeader("token",`Bearer ${this.token}`)
			dtask.setRequestHeader("Content-Type", "application/octet-stream;charset=utf-8")
			dtask.start()
		},

1.1 文件下载及保存和，打开文件

具体阐述：
1：通过uni.downloadFile 从结果中tempFilePath获取文件名称（因为后端是自己写的并生成了文件名称）
ps:（如果前端自定义的话可以自行修改去除uni.downloadFile那一坨代码即可，直接使用downloadFileSave函数）
2：手机具体存储位置的获取：具体见created中，代码片;Environment.getExternalStorageDirectory()这个方法获取的就是你手机的能看到的文件根目录（我的是小米：/storage/emulated/0）然后具体路径自定义即可（path+filename[.后缀]）
对文件路径的一些资料：适配Android10+设备注意事项
3：就是保存数据到指定的path（这样就很容易找到）,API: plus.downloader.createDownload(具体使用去官方文档查： Downloader模块管理网络文件下载任务)此时获取到的结果就是手机上具体的一个文件路径如：/storage/emulated/0/Download/xxxx/syslog-2024xxxx223026904.zip（很容易找到）
4：打开下载的文件： API：uni.openDocument（老规矩文档自己查）此时比较重要的参数就是刚刚保存后我们获取到的路径，然后就会让你使用哪种方式打开你的文件，这是根据你文件后缀来的。

以上就为大概流程

<template>
  <view>
	  <Navbar
	    :hideBtn="true" 
	    title="日志文件下载" 
	    bgColor="#55aaff" 
	    :h5Show="true"
	  />
	  <view v-if="address" style="color: #5ac725;display: flex;">下载地址:
	  	<view style="margin-left: 10px;color: black;width: 79%;">
	  		<uni-easyinput type="textarea" v-model="address"/>
	  	</view>
	  </view>
	  <u-gap></u-gap>
	  <view v-if="filePath" style="color: #5ac725;display: flex;">存储位置:
	  	<view style="margin-left: 10px;color: black;width: 79%;">
	  		<uni-easyinput type="textarea" v-model="filePath"/>
	  	</view>
	  </view>
	  <view style="display: flex;margin-top: 100rpx;">
	  	<button @click="downloadFile" type="primary">下载文件</button>
	  	<button v-if="filePath" @click="openFile" type="primary">打开文件</button>
	  </view>
  </view>

</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import * as LogsApiServer from '@/api/work/download.js'
import {ACCESS_TOKEN} from '@/store/mutation-types.js'
const { environment } = require('@/config/environment.js')
export default {
	components: {
	  Navbar,
	},
  data() {
    return {
      progressValue: 0,
      filePath: '', // 保存文件路径
	  filePathTemp: '',
	  token: '',
	  address: '',
	  fileName: ''
    };
  },
  created() {
	  //获取当前设备的默认环境路径
	  const Environment = plus.android.importClass('android.os.Environment')
	  this.filePathTemp = 'file://' + Environment.getExternalStorageDirectory() + '/Download/siyu-logs/'
	  //用户鉴权token
	  this.token = uni.getStorageSync(ACCESS_TOKEN)
	  //接口请求地址
	  this.address = environment.baseURL+'/LogRecord/downloadLogFileZip'
  },
  methods: {
	  
        downloadFile() {
        	//最终版本func
			this.downloadAndSaveFileTwo();
			//首次测试
			// this.downlocadAnsSaveThree();

        }, 
		downloadAndSaveFileTwo() {
		  // 下载文件
		  uni.downloadFile({
		    url: this.address, // 文件的下载地址
		    success: (res) => {
		      if (res.statusCode === 200) {
		        // 下载成功后，保存文件到公开目录
		        // this.saveFileToPrivateDownloads(res.tempFilePath);
				this.downloadFileSave(res.tempFilePath);
		      } else {
		        uni.showToast({
		          title: '下载失败，请重试',
		          icon: 'none'
		        });
		      }
		    },
		    fail: (err) => {
		      console.error('下载失败:', err);
		      uni.showToast({
		        title: '下载请求失败，请检查网络连接',
		        icon: 'none'
		      });
		    }
		  });
		},
		downloadFileSave(tempFilePath) {
		  const filenameFortemp = tempFilePath.split('/').pop(); // 获取文件名
		  const tempFileNamePath = this.filePathTemp+filenameFortemp
		  const dtask = plus.downloader.createDownload(
		    this.address, 
		    {
		      filename: tempFileNamePath, // 保存到应用私有目录
		      timeout: 10, // 设置超时
		      retry: 3,    // 重试次数
		      retryInterval: 5 // 重试间隔
		    },
		    (download, status) => {
		      if (status === 200) {
		        console.log('文件下载成功，保存路径：' + download.filename);
				this.filePath = download.filename.split("//")[1]
		        uni.showToast({
		          title: '文件已保存',
		          icon: 'success'
		        });
		        // 打开下载的文件
		        //this.openFile(download.filename);
		      } else {
		        console.log('下载失败，状态码：' + status);
		        uni.showToast({
		          title: '下载失败',
		          icon: 'none'
		        });
		      }
		    }
		  );
		  dtask.start(); // 开始下载任务
		},
		
		openFile(filePath) {
		  uni.openDocument({
		    filePath: this.filePath,
		    success: () => {
		      console.log('文件打开成功');
		    },
		    fail: (err) => {
		      console.error('文件打开失败:', err);
		      uni.showToast({
		        title: '文件打开失败',
		        icon: 'none'
		      });
		    }
		  });
		}

      
	  }
    };
	
</script>
<style>

</style>

2.还是上图片效果（请忽略前端的样式，哈哈）

展示完毕，哈哈！够精简

3.需要添加的App权限

"<uses-permission android:name=\"android.permission.INTERNET\"/>",
"<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",

4.总结

说实话这个我花了好久的时间去研究，找各种资料。实属不易特此记录

其实还有许多需要完善的：比如，下载进度条啊等等，我看官方还有许多API，后续我直接在这继续更吧，有时间的话！
一个坑就是：有些API在不同的运行场景有些API不支持，比如H5就不支持uni.saveFile还有其他的，根据官方文档提示，用了uni.getSystemManagerInfo等都直接报错了

还有就是比较重要的一点，uniapp可以设置文件的位置，比如内部，外部，沙盒内以及访问权限不一样。这里我用的是容易找到文件的方式。

5.结语

有什么问题请留言，欢迎大家讨论和完善，或者联系我：邮箱：910380566@qq.com