uniapp中预览图片的时候,长按图片保存到系统相册

1.预览图片用到了uniapp提供的previewImage

uni.previewImage({
	urls: this.list[index].pics, //预览的图片数组
	current: this.list[index].pics[i], //点击预览时,显示的那一张图片
	longPressActions: {
		itemList: ['保存图片'] //长按预览图片时显示的操作菜单
	}
})

2.下载图片用到了uniapp提供的downloadFile

下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。

uni.downloadFile({
    url: '', //下载资源的 url
    success: (res) => {
       //下载成功之后的函数,可以拿到返回文件的本地临时路径
    }
})

3.拿到本地临时路径,就可以调用uniapp提供的saveImageToPhotosAlbum保存到本地相册

uni.saveImageToPhotosAlbum({
     filePath: '', //文件的本地临时路径
      success: function () {
          console.log('save success');
      }
  })

最后附上三个结合一起的代码,实现预览图片,长按下载图片到本地相册

//这里的list是我拿到的数据数组,pics是我的图片数组
//因为list是循环的,这里面的index代表的是list下面的第几项,i代表的是pics下面的第几项,使用时,请自己按照的业务需求自己改动。
preview(index,i) {
	let that = this
    uni.previewImage({
		urls: this.list[index].pics,
		current: this.list[index].pics[i],
		longPressActions: {  
			itemList: ['保存图片'],  
			success: function(ress) {
				 uni.downloadFile({
				 		url: that.list[index].pics[ress.index],
				 		success: (res) =>{
				 			if (res.statusCode === 200){
				 				uni.saveImageToPhotosAlbum({
				 					filePath: res.tempFilePath,
				 					success: function() {
				 						//uniapp提供的消息提示框。
				 						uni.showToast({
				 							title: "保存成功",
				 							icon: "success"
				 						});
				 					},
				 					fail: function() {
				 						uni.showToast({
				 							title: "保存失败,请稍后重试",
				 							icon: "none"
				 						});
				 					}
				 				});
				 			}
				 		}
				 	})
			},  
			fail: function(res) {  
				console.log(res.errMsg);  
			}  
		}  
    });
},

最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值