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()
},

原文地址：https://blog.csdn.net/zjqjy0911/article/details/145198771

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！