小程序下载到本地相册（vue2）

最新推荐文章于 2024-08-13 10:18:00 发布

ddd_0501

最新推荐文章于 2024-08-13 10:18:00 发布

阅读量955

点赞数 10

文章标签：小程序

本文链接：https://blog.csdn.net/ddd_0501/article/details/138961770

版权

1.首先需要判断手机相册权限有没有打开

获取用户授权相册权限

用到的方法：uni.getSetting

wx.authorize （不跳转，会有一个弹框，选择是否打开权限）

wx.openSetting （跳转到设置页面手动打开）

//获取用户授权相册权限
		onStartDownload(downLoadUrl) {
			uni.showLoading({
			        title: '加载中...',
			   })
		    console.log("aaaaaaaaaaaaaaaaaaa")
		    uni.getSetting({
		      success: (res) => {
                  // 他第一次进入获取权限的时候返回的是undefined，弹出是否获取权限
                  // 点击拒绝时第二次进入时会返回false，直接跳转到权限页面
				  console.log(res.authSetting['scope.writePhotosAlbum'])
		        if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
                  // 弹出授权弹框
                  // scope.writePhotosAlbum 保存到相册属性
		          wx.authorize({
		            scope: 'scope.writePhotosAlbum',  
		            success: () => {
		              console.log('打开了授权')
                      //这个方法是调用下载的方法（自己定义的）
		              this.downGetCaremaEvent(downLoadUrl)
		            },
                    // 点击拒绝时进入
		            fail: (err) => {
		              console.log('授权失败:', err)
					  uni.showToast({
					  	title: '授权失败',
					  	icon: 'none',
					  	duration: 2000//持续的时间
					  })
		            }
		          })
		        } else if (!res.authSetting['scope.writePhotosAlbum']) {
                  // 调取设置页面
		          wx.openSetting({
		            success: (res) => {
		              console.log('openSetting成功回调:res', res)
		              if (res.authSetting['scope.writePhotosAlbum']) {
		                    console.log('授权了')
                            //这个方法是调用下载的方法（自己定义的）
		                    this.downGetCaremaEvent(downLoadUrl)
		              } else {
					        console.log("未授权")
		              }
		            },
		            fail: (err) => {
		 
		            },
		          })
		        } else {
                  //这个方法是调用下载的方法（自己定义的）
		          this.downGetCaremaEvent(downLoadUrl)
		        }
		      }
		    })
			uni.hideLoading();
		  },

2.接着开始做下载功能

以上代码 this.downGetCaremaEvent(downLoadUrl) 调用的就是下载的方法

需要先获取到相册权限才可以下载

用到的方法：uni.downloadFile

wx.saveVideoToPhotosAlbum （保存到相册）

        //封装上传视频到本地
		downGetCaremaEvent(downLoadUrl){
			uni.showLoading({
			        title: '加载中...',
			   })
			let fileName = new Date().valueOf(); //获取当前的时间戳，独一无二的特性，用来命名
			console.log(wx.env.USER_DATA_PATH + '/' + fileName + '.mp4')
			wx.downloadFile({
			      url: downLoadUrl, // 视频资源地址
			      filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
			      // header: {
			      //   "Content-Type":"video/mp4"
			      //   },
			      success: res => {
			        console.log('downloadFile成功回调res:', res)
			        wx.hideLoading()
			        let FilePath= res.filePath; // 下载到本地获取临时路径
			        let fileManager = wx.getFileSystemManager();
			        // 保存到相册
			        wx.saveVideoToPhotosAlbum({ // 保存到相册
			          filePath: FilePath,
			          success: file => {
			            // console.log('saveVideoToPhotosAlbum成功回调file:', file)
			            wx.showToast({
			              title: '视频保存成功',
			              duration: 3000,
			              icon: 'none'
			            })
			            fileManager.unlink({ // 删除临时文件
			              filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
			            })
			          },
			          fail: err => {
			            // console.log('saveVideoToPhotosAlbum失败回调err:', err)
			            fileManager.unlink({ // 删除临时文件
			              filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4'
			            })
			            wx.showToast({
			              title: '视频保存失败',
			              duration: 3000,
			              icon: 'none'
			            })
			          },
			          complete() {
			            wx.hideLoading()
			          }
			        })
			        //
			      },
			      fail(e) {
			        console.log('失败e', e)
			        wx.showToast({
			          title: '视频保存失败',
			          duration:3000,
			          icon:'none'
			        })
			      },
			      complete() {
			        // wx.hideLoading();
			      }
			})
		},

（注：在获取到权限之后才可以调用下载到本地的方法）

3.最后做点击事件调用方法

        //点击下载按钮
		downEvent(downLoadUrl,cartStatus){
            //调用获取权限的方法
            //我把下载的功能在权限调取成功里面调用的
			this.onStartDownload(downLoadUrl)
		},

代码中downLoadUrl是后端给传来的一个下载链接，这个链接放在浏览器里可以直接下载