前端uniapp下载保存到手机相册,注意:下载图片路径必须是接口返回

目录

    • html
    • JS
    • 最后

html

<view class="down-image"@click="getCodeDownImg">
		<image src="/static/index/index-drop-down.png" mode="aspectFill">image>
view>

JS

data(){
//必须是接口返回的路径,才可以保存到手机相册
		return{
qrCodeLink:'https://vtlte.yunjingwl.com/uploads/20231026/51212810b51191d44a641031b560333b.png'
		}
	},
	methods: {
// 下载二维码
		getCodeDownImg(){
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.downloadFile({
				url: self.qrCodeLink,//必须是接口返回的路径,才可以保存到手机相册
				success(res) {
					console.log(res,'res下载返回图片路径');
					uni.hideLoading();
					// 图片保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(data) {
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							});
						},
						fail(err) {
							console.log(err.errMsg);
							if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
								uni.showToast({
									title: '请允许访问相册后重试',
									icon: 'none',
									duration: 1000
								});
								setTimeout(() => {
									uni.openSetting();
								}, 1000);
							}
						},
						complete(res) {
							console.log('complete');
						}
					});
				}
			});
		},
}

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

你可能感兴趣的:(前端,uni-app,uniapp保存相册,uniapp保存下载相册)