uniapp 微信小程序，图片，视频，文件预览弹窗，可保存

			<view class="attachmentPopup">
				<view style="width: 100%;height:  100%;" v-if="Article.file_type==1">
					<image style="width: 100%;height: 90%;" :show-menu-by-longpress="true" :src="Article.file"
						mode="aspectFit" @click="previewImage({url:Article.file})"></image>
					<view class="attachmentTips">
						长按保存图片
					</view>
				</view>
				<view style="width: 100%;height: 100%;" v-if="Article.file_type==2">
					<video style="width: 100%;height: 90%;" :muted="true" :src="Article.file"
						v-if="Article.file"></video>
					<view class="attachmentTips" @click="onStartDownload">
						点击保存视频
					</view>
				</view>
				<view style="width: 100%;height: 100%;" v-if="Article.file_type==3">
					<view class="attachmentBorder flex jc ac" style="width: 100%;height: 90%;">
						<view class="">
							<image class="attachmentBorderimg" src="/static/file.png" mode="aspectFit"
								@click="viewfile">
							</image>
							<view class="attachmentTips">
								点击预览文件
							</view>
						</view>
					</view>
					<view class="attachmentTips">
						保存文件请点击预览文件页面右上角的三个小点
					</view>
				</view>
			</view>

	.attachmentPopup {
		width: 690rpx;
		height: 60vh;
		padding: 70rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;

		.attachmentTips {
			width: 100%;
			font-size: 26rpx;
			color: #999;
			text-align: center;
			margin-top: 20rpx;
		}

		.attachmentBorder {
			border-radius: 18rpx;
			border: 1rpx solid #999;

			.attachmentBorderimg {
				width: 300rpx;
				height: 300rpx;
				margin: auto;
			}
		}

	}

js

		
	// 预览图片   使用可多张可单张 多张就传数组arr，和当前的index，如果网络地址也要传一下 
	// {
	// 	url: this.user.aboutphoto
	// }

	// this.$publicfun.previewImage({
	// 	arr: arr,
	// 	i: index
	// })
	//单张直接传地址就行
	previewImage({
		arr = [],
		http = "",
		i = 0,
		url = ''
	}) {
		// console.log(i);
		// console.log(url);
		// console.log(arr);
		//准备一个装图片路径的  数组imgs
		if (arr.length == 0) {
			uni.previewImage({
				urls: [url],
				current: i
			})
			return;
		}

		let imgs = arr.map(item => {
			//只返回图片路径
			return http + item
		})
		uni.previewImage({
			urls: imgs,
			current: i
		})
	},






//获取权限
			onStartDownload() {
				wx.getSetting({
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveVideo()
									return
								},
								fail: (err) => {
									console.log('授权失败:', err)
								}
							})
						} else if (!res.authSetting['scope.writePhotosAlbum']) {
							wx.openSetting({
								success: (res) => {
									if (res.authSetting['scope.writePhotosAlbum']) {
										this.saveVideo()
										return
									}
								}
							})
						} else {
							this.saveVideo()
							return
						}
					}
				})
			},
			//保存视频
			saveVideo() {
				console.log('操作了');

				// uni.showLoading()
				uni.downloadFile({
					url: this.Article.file,
					timeout: 30000,
					header: {
						"Content-Type": "video/mp4"
					},
					success: res => {
						console.log(this.Article.file);
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								console.log('进入保存');
								uni.hideLoading()
								uni.showToast({
									title: "保存成功",
									duration: 2000,
								})
							}
						})
					},
					fail() {
						uni.showToast({
							title: "保存失败",
							duration: 2000,
						})
						uni.hideLoading()
					}
				})
				uni.hideLoading()

			},


			//预览文件
			viewfile() {
				uni.downloadFile({
					url: this.Article.file,
					timeout: 30000,
					header: {
						"Content-Type": "video/mp4"
					},
					success: res => {
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true,
							success: function(openRes) {
								console.log('打开文档成功', openRes);
							},
						})
					},
					fail() {
						uni.showToast({
							title: "保存失败",
							duration: 2000,
						})
						uni.hideLoading()
					}
				})

				// wx.getFileSystemManager()
			},