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

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

你可能感兴趣的:(uniapp)