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

2024-02-28 08:10| 来源: 网络整理| 查看: 265

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

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

【本文地址】

公司简介

联系我们