zj-Exercise/PACS-f-mb-demo-zj/pages/index/index.vue

<template>
	<view>
	
		<view>
			<image show-menu-by-longpress="true" :src=url ></image>
			
        </view>

			<button  class="downBtn"  @tap="savePoster()">图像下载</button>
			
			<view class="progress-container" v-if="isShowProgress">
				<view class="progress-box">
					<view class="text">文件下载中，请稍后...</view>
					<progress :percent="progress" show-info stroke-width="3" />
				</view>
			</view>



		
	</view>
</template>

<script>
	export default {
		data() {
			return {
								url: 'http://125.71.216.35:9001/dcm/27/image-00001.png',
								//url: 'http://125.71.216.35:9001/dcm/27/222.mp4',
								isShowProgress: false,
								progress: 0,
			}
		},
		methods: {
			savePoster() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							//this.saveImageToPhotosAlbum();
							this.downloadFile()
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									//this.saveImageToPhotosAlbum();
									this.downloadFile()
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击图像下载",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
				
			downloadFile() {
							const downloadTask = uni.downloadFile({
								url: this.url,
								success: res => {
									if (res.statusCode === 200) {
										this.isShowProgress = false;
										//console.log('下载成功');
									}
									let that = this;
									
									//uni.saveFile({
									//	tempFilePath: res.tempFilePath,
									
										uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function(red) {
											//console.log(red);
											that.isShowProgress = false;
											uni.showToast({
												title: '图像已存入相册',
												//将值设置为 success 或者直接不用写icon这个参数
												icon: 'success',
												//显示持续时间为 2秒
												duration: 3000
											})
										}
									});
								}
							})
							
							downloadTask.onProgressUpdate((res) => {
								if(res.progress > 0) {
									this.isShowProgress = true;
								}
								this.progress = res.progress;
								//console.log('下载进度：' + res.progress);
								//console.log('已下载长度：' + res.totalBytesWritten);
								//console.log('文件总长度：' + res.totalBytesExpectedToWrite);
							})
						},


		}
	}
</script>

<style  lang="scss" scoped>
	page{
		height: 100%;
		background-color: #000;
	} 



	.downBtn{
		margin-top: 50%;
		width: 30%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		background: #05c86d;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
		.progress-container{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: rgba(0, 0, 0, .2);
			width: 750rpx;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			.progress-box{
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				.text{
					margin-bottom: 20rpx;
				}
			}
        }

</style>