博客

涉及的 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)        // 参数是网络图片途径