uniapp下载和上传照片-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp下载和上传照片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

利用uniapp开发的时候，需要下载和上传照片，在H5和微信小程序中的写法不一样。

H5环境下

浏览器中下载就是模拟超链接下载。也不需要获取什么权限，比较简单。

// #ifdef H5
this.isLoading = true;
let oA = document.createElement("a");
// 设置下载的文件名，不设置就是默认的
oA.download = ''; 
// 图片下载链接
oA.href = imgUrl;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
this.isLoading = false;
// #endif

微信小程序

小程序下载需要先获取相册权限。

downloadPic() {
	// #ifdef MP-WEIXIN
	this.checkAppRight();
	// #endif 
	// #ifdef H5
	...
	// #endif
},
// 先校验权限
checkAppRight() {
    // 检查是否之前就调用过uni.authorize
	if (!this.isAuthorize) {
		uni.authorize({
			// 请求相册写入权限
			scope: 'scope.writePhotosAlbum',
			success: () => {
				this.downloadImgOnPhone();
			}
		});
		return;
	}
	// 检查当前小程序的设置信息，这个设置可以看下面的图片说明是什么设置
	uni.getSetting({
	    // 这里可能会触发报错：this 为 undefined，建议使用箭头函数，不要使用普通函数，否则在小程序中调用this会报错。
		success: (res) => {
			// 如果没有相册写入权限，需要先引导用户打开设置权限
			if (!res.authSetting['scope.writePhotosAlbum']) {
				/* 打开设置的方法 */
				uni.showModal({
					title: '提示',
					content: '请先在设置页面打开“保存相册”使用权限',
					confirmText: '去设置',
					cancelText: '取消',
					success: data => {
						if (data.confirm) {
							uni.openSetting()
						}
					}
				});
			} else {
				this.downloadImgOnPhone();
			}
		}
	});
},
// 开始下载图片
downloadImgOnPhone() {
	this.isLoading = true;
	// 下载文件，必须先调用downloadFile，不然会报错。
	uni.downloadFile({
		url: imgUrl, // 图片链接
		success: (res) => {
			if (res.statusCode === 200) {
			    // 保存下载的文件到相册
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: () => {
						this.isLoading = false;
						uni.showToast({
							title: '下载成功',
							icon: "none",
							duration: 5000
						})
					},
					fail: (err) => {
						this.isLoading = false;
						uni.showToast({
							title: '下载失败',
							icon: "none",
							duration: 5000
						})
					},
				})
			}
		},
		fail: (err) => {
			this.isLoading = false;
			uni.showToast({
				title: JSON.stringify(err),
				icon: "none",
				duration: 5000
			})
		}
	});
}

查看微信小程序的设置信息，点击设置进去即可查看，uni.openSetting接口就是会打开这个设置页面：
uniapp下载和上传照片,微信小程序,VUE,前端,uni-app,notepad++
uni.authorize 申请授权，会触发底部弹窗：

如果小程序被用户授权成功，在openSetting页面会显示“添加到相册”，如果用户手动关掉该选项，那么下次就不应该调用uni.authorize，而是调用uni.openSettin，引导用户开启开关。
uniapp下载和上传照片,微信小程序,VUE,前端,uni-app,notepad++
更多uniapp的开发文章可以关注博主，后续还会继续更新。
如果对于uview组件的开发效果感兴趣的童鞋，可以访问链接查看：https://ext.dcloud.net.cn/plugin?id=12603文章来源地址https://www.toymoban.com/news/detail-560064.html