uniapp移动端文件下载之进度条

uniapp移动端文件下载续集之-下载进度条

进度条

<view  style="padding: 10px;">
  	<uni-section title="下载进度" type="line"></uni-section>
  	<u-line-progress :percentage="percentage" activeColor="#00aa00"></u-line-progress>
  </view>

鉴权+进度条

downloadAndSaveHasProgress(){
	const param = 'startDate='+this.dateRange.splice(',')[0]+'&endDate='+new Date().toISOString().split('T')[0]
	const dtask = plus.downloader.createDownload(this.address+param,
	{
//这是我自己定义的变量
//this.filePathTemp = 'file://' + Environment.getExternalStorageDirectory() + '/Download/siyu-logs/'
		filename: this.filePathTemp+'syslog-'+this.formatDate(new Date())+'.zip'
	}, (res, status) => {
	  if (status === 200) {
		console.log(res)
		const contentDisposition = res.__responseHeaders__['Content-Disposition'];
		const filenameMatch = contentDisposition.match(/filename=(.+)/);
		const filename = filenameMatch ? filenameMatch[1].replace(/\"/g, '') : 'default_filename.zip';
		console.log("后端返回的文件名字：",filename)
	    console.log(res.filename)
		this.filePath = res.filename
		//下载结束后，打开文件
		// this.openFile(res.filename)
	  }else{
		console.error("Download failed: " + status);
	  }
	})
	//鉴权
	dtask.setRequestHeader("token",`Bearer ${this.token}`)
	dtask.setRequestHeader("Content-Type", "application/x-zip-compressed;charset=utf-8")
	// 监听下载进度
	dtask.addEventListener('statechanged', (download, status) => {
		if (status === 200) { // 下载中
			console.log('下载进度: ' + download.downloadedSize + ' bytes');
			console.log('总大小: ' + download.totalSize + ' bytes');
			const progress = Math.round((download.downloadedSize / download.totalSize) * 100);
			console.log('下载进度百分比: ' + progress + '%');
			this.percentage = progress
		}
	});
	dtask.start()
	
},
//根据路径打开指定的文件
openFile(filePath) {
	  uni.openDocument({
		filePath: this.filePath,
		success: () => {
		  console.log('文件打开成功');
		},
		fail: (err) => {
		  console.error('文件打开失败:', err);
		  uni.showToast({
			title: '文件打开失败',
			icon: 'none'
		  });
		}
	  });