uniapp 封装将网络路径图片保存至相册的方法

奋斗吧
奋斗吧
擅长邻域:未填写

标签: uniapp 封装将网络路径图片保存至相册的方法

2023-07-13 18:23:35 95浏览

获取图片信息(从而获取图片本地路径)- 保存图片到系统相册。

涉及的 uniapp API

uni.getImageInfo - 获取图片信息(从而获取图片本地路径)这个 API 也可以更换为 uni.downloadFile

uni.saveImageToPhotosAlbum - 保存图片到系统相册

封装的方法(vue3)

const saveImg = (netUrl) => {
		if(!netUrl) return
		uni.showLoading({
			title: '保存图片中...'
		})
		// 获取图片信息
		uni.getImageInfo({
			src: netUrl,
			success(res) {
				// console.log('获取图片信息', res);
				// 再将图片保存到本地
				uni.saveImageToPhotosAlbum({
					filePath: res.path,
					success(data) {
						uni.hideLoading()
						uni.showToast({
							title: '图片保存成功'
						})
					},
					fail(err) {
						if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err
							.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
							"saveImageToPhotosAlbum:fail authorize no response") {
							// 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
							wx.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success: modalSuccess => {
									wx.openSetting({
										success(settingdata) {
											console.log("settingdata",
												settingdata)
											if (settingdata.authSetting[
													'scope.writePhotosAlbum'
													]) {
												wx.showModal({
													title: '提示',
													content: '获取权限成功,请重新下载图片',
													showCancel: false,
												})
											} else {
												wx.showModal({
													title: '提示',
													content: '获取权限失败,将无法保存到相册哦~',
													showCancel: false,
												})
											}
										},
										fail(failData) {
											console.log("failData", failData)
										},
										complete(finishData) {
											console.log("finishData",
												finishData)
										}
									})
								}
							})
						}
					},
					complete(res) {
						uni.hideLoading()
					}
				})
			},
			fail(err) {
				// console.error('下载资源失败', err);
				uni.hideLoading()
			}
		})

	}

方法使用示例

saveImg(res.data[0].url)        // 参数是网络图片途径

好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695