uniapp下载图片并保存到相册

最新推荐文章于 2026-04-15 10:57:50 发布

原创最新推荐文章于 2026-04-15 10:57:50 发布 · 6.7k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #js

uniapp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用uniapp实现从服务器下载图片，并将其保存至手机相册的具体步骤及代码实现。通过uni.downloadFile和uni.saveImageToPhotosAlbum方法，配合正确的header设置，可轻松完成图片的下载与保存。

uniapp如何下载图片并保存到相册

在这里插入图片描述
我们要实现的功能是点击下载场馆二维码到手机相册
下面是实现的js代码

settingQrImgBase64(id) {
				uni.showLoading({
					title: '下载中...',
					mask: true
				})
				uni.downloadFile({
				    url:  url, // 这里是你接口地址 若要传参 直接 url拼接参数即可
					header:{
						'X-Authorization': uni.getStorageSync('session.login')['token']
					},
					methods: 'GET',
				    success: (res) => {
				    	console.log(res,'res')
						var tempFilePath = res.tempFilePath; // 这里拿到后端返回的图片路径
						uni.saveImageToPhotosAlbum({  // 然后调用这个方法
							filePath: tempFilePath,
							success : (res) => {
								uni.hideLoading();
								uni.showToast({title : '图片已保存'})
							}
						})
				    },
					fail: () => {
						uni.hideLoading();
					}
				});
			},

然后打开手机相册就可以看到图片啦~