希
  • 发布:2020-07-03 18:09
  • 更新:2022-03-18 15:10
  • 阅读:6056

uni-app下载图片(新手上路)

分类:uni-app

//app端下载图片

this.$h5Util.interaction('保存图片', '是否保存到本地相册').then(res => {  
					if (res == 1) {  
						// const downloadTask =   
						uni.downloadFile({  
							url: this.str, //这里为图片路径  
							success: (res) => {  
								if (res.statusCode === 201) {  
									uni.saveImageToPhotosAlbum({  
										filePath: res.tempFilePath,  
										success: function() {  
											uni.showToast({  
												title: '保存成功!',  
												icon: 'none'  
											})  
										},  
										fail: function() {  
											uni.showToast({  
												title: '保存失败,请稍后重试!',  
												icon: 'none'  
											})  
										}  
									});  
								}  
							}  
						});  
						// downloadTask.onProgressUpdate((res) => {  
						// 	this.bt=true;  
						//     console.log('下载进度' + res.progress);  
						//     console.log('已经下载的数据长度' + res.totalBytesWritten);  
						//     console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);  
						// 	this.br=(res.totalBytesWritten/res.totalBytesExpectedToWrite)*100  
						//     // 测试条件,取消下载任务。  
						//     // if (res.progress > 50) {  
						//     //     downloadTask.abort();  
						//     // }  
						// });  
  
					}  
				})

//pc端测试时H5下载
需要: Base64

import {  
		pathToBase64, //图片路径转base64  
		base64ToPath, //base64码转图片  
	} from '@/js_sdk/gsq-image-tools/image-tools/index.js'  

var url;  
  
this.$h5Util.interaction('保存图片', '手机H5点击或长按二维码保存').then(res => {  
					if (res == 1) {  
					uni.downloadFile({  
						url: this.str, //这里为图片路径  
						success: (res) => {  
							if (res.statusCode === 201) {  
								pathToBase64(res.tempFilePath).then(base64 => {  
										url = base64;  
										var oA = document.createElement("a");  
										oA.download =" ";// 设置下载的文件名,默认是'下载'  
										oA.href = url;  
										oA.click();  
										document.body.appendChild(oA);  
										oA.remove(); // 下载之后把创建的元素删除  
									})  
									.catch(error => {  
										console.error(error)  
									})  
							}  
						}  
					});

//手机H5端可以点击图片或长按直接保存
//目前只找到这些嘿嘿

0 关注 分享

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 嗨哆嚒 :
H5的时候将base64给image展示,直接长按保存下载
2022-03-18 15:10
2***@qq.com

2***@qq.com

你这 if (res.statusCode === 201)不对吧,res.statusCode为200的时候才是success的状态
2021-10-19 09:24
嗨哆嚒

嗨哆嚒

如果是画布的图片呢,H5需要怎么做,我卡在了将 base64 转为 图片后。下一步暂时没有思路
2020-09-22 17:11