ToB企服应用市场:ToB评测及商务社交产业平台

标题: uniapp 微信小步伐，图片，视频，文件预览弹窗，可保存 [打印本页]

---

作者: 南七星之家    时间: 6 小时前
标题: uniapp 微信小步伐，图片，视频，文件预览弹窗，可保存

1.                         <view class="attachmentPopup">
2.                                 <view style="width: 100%;height:  100%;" v-if="Article.file_type==1">
3.                                         <image style="width: 100%;height: 90%;" :show-menu-by-longpress="true" :src="Article.file"
4.                                                 mode="aspectFit" @click="previewImage({url:Article.file})"></image>
5.                                         <view class="attachmentTips">
6.                                                 长按保存图片
7.                                         </view>
8.                                 </view>
9.                                 <view style="width: 100%;height: 100%;" v-if="Article.file_type==2">
10.                                         <video style="width: 100%;height: 90%;" :muted="true" :src="Article.file"
11.                                                 v-if="Article.file"></video>
12.                                         <view class="attachmentTips" @click="onStartDownload">
13.                                                 点击保存视频
14.                                         </view>
15.                                 </view>
16.                                 <view style="width: 100%;height: 100%;" v-if="Article.file_type==3">
17.                                         <view class="attachmentBorder flex jc ac" style="width: 100%;height: 90%;">
18.                                                 <view class="">
19.                                                         <image class="attachmentBorderimg" src="/static/file.png" mode="aspectFit"
20.                                                                 @click="viewfile">
21.                                                         </image>
22.                                                         <view class="attachmentTips">
23.                                                                 点击预览文件
24.                                                         </view>
25.                                                 </view>
26.                                         </view>
27.                                         <view class="attachmentTips">
28.                                                 保存文件请点击预览文件页面右上角的三个小点
29.                                         </view>
30.                                 </view>
31.                         </view>

复制代码

1.         .attachmentPopup {
2.                 width: 690rpx;
3.                 height: 60vh;
4.                 padding: 70rpx 30rpx 30rpx 30rpx;
5.                 box-sizing: border-box;
7.                 .attachmentTips {
8.                         width: 100%;
9.                         font-size: 26rpx;
10.                         color: #999;
11.                         text-align: center;
12.                         margin-top: 20rpx;
13.                 }
15.                 .attachmentBorder {
16.                         border-radius: 18rpx;
17.                         border: 1rpx solid #999;
19.                         .attachmentBorderimg {
20.                                 width: 300rpx;
21.                                 height: 300rpx;
22.                                 margin: auto;
23.                         }
24.                 }
26.         }

复制代码

js

1.                
2.         // 预览图片   使用可多张可单张 多张就传数组arr，和当前的index，如果网络地址也要传一下
3.         // {
4.         //         url: this.user.aboutphoto
5.         // }
7.         // this.$publicfun.previewImage({
8.         //         arr: arr,
9.         //         i: index
10.         // })
11.         //单张直接传地址就行
12.         previewImage({
13.                 arr = [],
14.                 http = "",
15.                 i = 0,
16.                 url = ''
17.         }) {
18.                 // console.log(i);
19.                 // console.log(url);
20.                 // console.log(arr);
21.                 //准备一个装图片路径的  数组imgs
22.                 if (arr.length == 0) {
23.                         uni.previewImage({
24.                                 urls: [url],
25.                                 current: i
26.                         })
27.                         return;
28.                 }
30.                 let imgs = arr.map(item => {
31.                         //只返回图片路径
32.                         return http + item
33.                 })
34.                 uni.previewImage({
35.                         urls: imgs,
36.                         current: i
37.                 })
38.         },
45. //获取权限
46.                         onStartDownload() {
47.                                 wx.getSetting({
48.                                         success: (res) => {
49.                                                 if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
50.                                                         wx.authorize({
51.                                                                 scope: 'scope.writePhotosAlbum',
52.                                                                 success: () => {
53.                                                                         this.saveVideo()
54.                                                                         return
55.                                                                 },
56.                                                                 fail: (err) => {
57.                                                                         console.log('授权失败:', err)
58.                                                                 }
59.                                                         })
60.                                                 } else if (!res.authSetting['scope.writePhotosAlbum']) {
61.                                                         wx.openSetting({
62.                                                                 success: (res) => {
63.                                                                         if (res.authSetting['scope.writePhotosAlbum']) {
64.                                                                                 this.saveVideo()
65.                                                                                 return
66.                                                                         }
67.                                                                 }
68.                                                         })
69.                                                 } else {
70.                                                         this.saveVideo()
71.                                                         return
72.                                                 }
73.                                         }
74.                                 })
75.                         },
76.                         //保存视频
77.                         saveVideo() {
78.                                 console.log('操作了');
80.                                 // uni.showLoading()
81.                                 uni.downloadFile({
82.                                         url: this.Article.file,
83.                                         timeout: 30000,
84.                                         header: {
85.                                                 "Content-Type": "video/mp4"
86.                                         },
87.                                         success: res => {
88.                                                 console.log(this.Article.file);
89.                                                 uni.saveVideoToPhotosAlbum({
90.                                                         filePath: res.tempFilePath,
91.                                                         success: res => {
92.                                                                 console.log('进入保存');
93.                                                                 uni.hideLoading()
94.                                                                 uni.showToast({
95.                                                                         title: "保存成功",
96.                                                                         duration: 2000,
97.                                                                 })
98.                                                         }
99.                                                 })
100.                                         },
101.                                         fail() {
102.                                                 uni.showToast({
103.                                                         title: "保存失败",
104.                                                         duration: 2000,
105.                                                 })
106.                                                 uni.hideLoading()
107.                                         }
108.                                 })
109.                                 uni.hideLoading()
111.                         },
114.                         //预览文件
115.                         viewfile() {
116.                                 uni.downloadFile({
117.                                         url: this.Article.file,
118.                                         timeout: 30000,
119.                                         header: {
120.                                                 "Content-Type": "video/mp4"
121.                                         },
122.                                         success: res => {
123.                                                 uni.openDocument({
124.                                                         filePath: res.tempFilePath,
125.                                                         showMenu: true,
126.                                                         success: function(openRes) {
127.                                                                 console.log('打开文档成功', openRes);
128.                                                         },
129.                                                 })
130.                                         },
131.                                         fail() {
132.                                                 uni.showToast({
133.                                                         title: "保存失败",
134.                                                         duration: 2000,
135.                                                 })
136.                                                 uni.hideLoading()
137.                                         }
138.                                 })
140.                                 // wx.getFileSystemManager()
141.                         },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4