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);
}
}
});
},
最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。