【Uniapp下载图片到手机】

已于 2024-12-02 21:49:06 修改
阅读量1.3k 收藏 16
点赞数 23
文章标签： 人工智能 大数据 算法
于 2024-12-02 21:35:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwq5201314/article/details/144199214
版权

Uniapp下载图片到手机

一.根据不同设备展示不同的按钮
1.1 图片显示
1.2 微信小程序显示的按钮
1.3 h5显示的按钮
1.4 app显示的按钮

二. 引入需要用到的文件
3. data中需要的数据
4. onload方法
5. methods需要用到的方法
6. 获取手机相册的访问权限文件
7. 注释：在使用微信小程序的时候，下载需要将域名配置一下白名单，否则没效果哦~~~

1.根据不同设备展示不同的按钮
1.1 图片显示


1.2 微信小程序显示的按钮

<view class=“uni-flex align-items justify-align-center download backgroundColor” v-if=“openSettingBtnHidden”
@click=“saveEwm”>下 载
<button class=“uni-flex align-items justify-align-center download backgroundColor” v-else hover-class=“none”
open-type=“openSetting” @opensetting=“handleSetting”>下 载

1.3 h5显示的按钮

<view class=“uni-flex align-items justify-align-center btn backgroundColor” @click=“saveImgToLocal”>下 载


1.4 app显示的按钮

		<!-- ios按钮 -->
		<button class=" uni-flex align-items justify-align-center  btn backgroundColor" v-if="isIos"
			@click.stop="judgeIosPermission('photoLibrary')">下 载</button>
			
		<!-- Android按钮 -->
		<button class="uni-flex align-items justify-align-center btn backgroundColor" v-if="!isIos"
			@click.stop="requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')">
			下 载
		</button>
		
<!-- #endif -->

  1. 引入需要用到的文件
    //获取手机相册的访问权限文件
    import permision from ‘@/common/permission.js’
    //封装的接口
    import Api from ‘@/api/apply.js’
    1
    2
    3
    4

  2. data中需要的数据
    data() {
    return {
    url: ‘’,// 下载图片
    openSettingBtnHidden: true, //是否授权
    isIos:false,//判断app系统
    }
    },

  3. onload方法
    // 判断是Android 还是 ios

     // #ifdef APP-PLUS
 if (plus.os.name === 'Android') {
 	this.isIos = false
 } else {
 	this.isIos = true
 }
 // #endif

    //获取接口返回的数据（图片）
    Api.getImage().then(res => {
    if (res.code == 200) {
    this.url = res.data
    }
    })

  4. methods需要用到的方法
    //ios端保存到相册
    judgeIosPermission(permisionID) {
    let _this = this;
    let result = permision.requestIOS(permisionID);
    let strStatus = result ? ‘已’ : ‘未’;
    if (strStatus == ‘已’) {
    if (!uni.getStorageSync(‘IosPHPhotoLibraryPermission’)) {
    uni.showModal({
    content: permisionID + ‘权限’ + strStatus + ‘获得授权’,
    showCancel: false
    });
    uni.setStorageSync(‘IosPHPhotoLibraryPermission’, true);
    }
    _this.saveImgToLocal(_this.url);
    } else {
    uni.showModal({
    content: permisionID + ‘权限’ + strStatus + ‘获得授权’,
    showCancel: false
    });
    }
    },
    //android端保存到相册
    async requestAndroidPermission(permisionID) {
    let _this = this;
    let result = await permision.requestAndroid(permisionID);
    let strStatus;
    if (result == 1) {
    strStatus = ‘已获得授权’;
    if (!uni.getStorageSync(‘AndroidPHPhotoLibraryPermission’)) {
    uni.showModal({
    content: permisionID + strStatus,
    showCancel: false
    });
    uni.setStorageSync(‘AndroidPHPhotoLibraryPermission’, true);
    }
    _this.saveImgToLocal(_this.url);
    } else if (result == 0) {
    strStatus = ‘未获得授权’;
    uni.showModal({
    content: permisionID + strStatus,
    showCancel: false
    });
    } else {
    strStatus = ‘被永久拒绝权限’;
    uni.showModal({
    content: permisionID + strStatus,
    showCancel: false
    });
    }
    },
    //微信小程序保存到相册
    handleSetting(e) {
    if (!e.detail.authSetting[‘scope.writePhotosAlbum’]) {
    this.openSettingBtnHidden = false;
    } else {
    this.openSettingBtnHidden = true;
    }
    },
    saveEwm(e) {
    //获取相册授权
    let _this = this;
    uni.getSetting({
    success(res) {
    if (!res.authSetting[‘scope.writePhotosAlbum’]) {
    uni.authorize({
    scope: ‘scope.writePhotosAlbum’,
    success() {
    _this.saveImgToLocal(_this.url);
    },
    fail() {
    //这里是用户拒绝授权后的回调
    _this.openSettingBtnHidden = false;
    }
    });
    } else {
    //用户已经授权过了
    _this.saveImgToLocal(_this.url);
    }
    }
    });
    },
    saveImgToLocal(e, num) {
    if (num == 1) {
    uni.showModal({
    title: ‘提示’,
    content: ‘确定保存到相册吗’,
    success: res => {
    if (res.confirm) {
    uni.downloadFile({
    url: e.replace(‘http’, ‘https’), //图片地址
    success: res => {
    if (res.statusCode === 200) {
    uni.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success: function() {
    uni.showToast({
    title: ‘保存成功到相册’,
    icon: ‘none’
    });
    },
    fail: function() {
    uni.showToast({
    title: ‘保存失败’,
    icon: ‘none’
    });
    }
    });
    }
    }
    });
    } else if (res.cancel) {}
    }
    });
    } else {
    uni.downloadFile({
    url: e.replace(‘http’, ‘https’), //图片地址
    success: res => {
    if (res.statusCode === 200) {
    uni.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success: function() {
    uni.showToast({
    title: ‘保存成功到相册’,
    icon: ‘none’
    });
    },
    fail: function() {
    uni.showToast({
    title: ‘保存失败’,
    icon: ‘none’
    });
    }
    });
    }
    }
    });
    }
    },
    previewFile() {

     		// #ifdef  APP || MP
 		uni.downloadFile({
 			url: this.url , //后端返回的文件地址
 			success: function(res) {
 				console.log(res, '下载成功')
 				if (res.code === 200) {
 					// 打开文件
 					uni.saveFile({
 						tempFilePath: res.tempFilePath, //临时路径
 						success: function(res) {
 							uni.showToast({
 								icon: 'none',
 								mask: true,
 								title: '文件已保存：' + res.savedFilePath, //保存路径
 								duration: 3000,
 							});
 							setTimeout(() => {
 								//打开文档查看
 								uni.openDocument({
 									filePath: res.savedFilePath,
 									success: function(res) {
 										console.log('打开文档成功');
 									}
 								});
 							}, 3000)
 						}
 					});
 				} else {
 					uni.showToast({
 						title: '打开文件失败请重试',
 						icon: 'none'
 					})
 				}
 				uni.hideLoading()
 			},
 			fail: (err) => {
 				uni.hideLoading()
 				console.log(err, '下载失败')
 				uni.showToast({
 					title: '加载失败请重试',
 					icon: "none"
 				})
 			}
 		})
 		// #endif
 	}

  5. 获取手机相册的访问权限文件
    /// null = 未请求，1 = 已允许，0 = 拒绝|受限, 2 = 系统未开启

var isIOS
function album() {
var result = 0;
var PHPhotoLibrary = plus.ios.import(“PHPhotoLibrary”);
var authStatus = PHPhotoLibrary.authorizationStatus();
if (authStatus === 0) {
result = null;
} else if (authStatus == 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(PHPhotoLibrary);
return result;
}
function camera() {
var result = 0;
var AVCaptureDevice = plus.ios.import(“AVCaptureDevice”);
var authStatus = AVCaptureDevice.authorizationStatusForMediaType(‘vide’);
if (authStatus === 0) {
result = null;
} else if (authStatus == 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(AVCaptureDevice);
return result;
}
function location() {
var result = 0;
var cllocationManger = plus.ios.import(“CLLocationManager”);
var enable = cllocationManger.locationServicesEnabled();
var status = cllocationManger.authorizationStatus();
if (!enable) {
result = 2;
} else if (status === 0) {
result = null;
} else if (status === 3 || status === 4) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(cllocationManger);
return result;
}
function push() {
var result = 0;
var UIApplication = plus.ios.import(“UIApplication”);
var app = UIApplication.sharedApplication();
var enabledTypes = 0;
if (app.currentUserNotificationSettings) {
var settings = app.currentUserNotificationSettings();
enabledTypes = settings.plusGetAttribute(“types”);
if (enabledTypes == 0) {
result = 0;
console.log(“推送权限没有开启”);
} else {
result = 1;
console.log(“已经开启推送功能!”)
}
plus.ios.deleteObject(settings);
} else {
enabledTypes = app.enabledRemoteNotificationTypes();
if (enabledTypes == 0) {
result = 3;
console.log(“推送权限没有开启!”);
} else {
result = 4;
console.log(“已经开启推送功能!”)
}
}
plus.ios.deleteObject(app);
plus.ios.deleteObject(UIApplication);
return result;
}
function contact() {
var result = 0;
var CNContactStore = plus.ios.import(“CNContactStore”);
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
if (cnAuthStatus === 0) {
result = null;
} else if (cnAuthStatus == 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(CNContactStore);
return result;
}
function record() {
var result = null;
var avaudiosession = plus.ios.import(“AVAudioSession”);
var avaudio = avaudiosession.sharedInstance();
var status = avaudio.recordPermission();
console.log(“permissionStatus:” + status);
if (status === 1970168948) {
result = null;
} else if (status === 1735552628) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(avaudiosession);
return result;
}
function calendar() {
var result = null;
var EKEventStore = plus.ios.import(“EKEventStore”);
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
if (ekAuthStatus == 3) {
result = 1;
console.log(“日历权限已经开启”);
} else {
console.log(“日历权限没有开启”);
}
plus.ios.deleteObject(EKEventStore);
return result;
}
function memo() {
var result = null;
var EKEventStore = plus.ios.import(“EKEventStore”);
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
if (ekAuthStatus == 3) {
result = 1;
console.log(“备忘录权限已经开启”);
} else {
console.log(“备忘录权限没有开启”);
}
plus.ios.deleteObject(EKEventStore);
return result;
}
function requestIOS(permissionID) {
return new Promise((resolve, reject) => {
switch (permissionID) {
case “push”:
resolve(push());
break;
case “location”:
resolve(location());
break;
case “record”:
resolve(record());
break;
case “camera”:
resolve(camera());
break;
case “album”:
resolve(album());
break;
case “contact”:
resolve(contact());
break;
case “calendar”:
resolve(calendar());
break;
case “memo”:
resolve(memo());
break;
default:
resolve(0);
break;
}
});
}
function requestAndroid(permissionID) {
return new Promise((resolve, reject) => {
plus.android.requestPermissions(
[permissionID],
function(resultObj) {
var result = 0;
for (var i = 0; i < resultObj.granted.length; i++) {
var grantedPermission = resultObj.granted[i];
console.log(‘已获取的权限：’ + grantedPermission);
result = 1
}
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
var deniedPresentPermission = resultObj.deniedPresent[i];
console.log(‘拒绝本次申请的权限：’ + deniedPresentPermission);
result = 0
}
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
var deniedAlwaysPermission = resultObj.deniedAlways[i];
console.log(‘永久拒绝申请的权限：’ + deniedAlwaysPermission);
result = -1
}
resolve(result);
},
function(error) {
console.log('result error: ’ + error.message)
resolve({
code: error.code,
message: error.message
});
}
);
});
}
function gotoAppPermissionSetting() {
if (permission.isIOS) {
var UIApplication = plus.ios.import(“UIApplication”);
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import(“NSURL”);
var setting2 = NSURL2.URLWithString(“app-settings:”);
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
var Intent = plus.android.importClass(“android.content.Intent”);
var Settings = plus.android.importClass(“android.provider.Settings”);
var Uri = plus.android.importClass(“android.net.Uri”);
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts(“package”, mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
const permission = {
get isIOS(){
return typeof isIOS === ‘boolean’ ? isIOS : (isIOS = uni.getSystemInfoSync().platform === ‘ios’)
},
requestIOS: requestIOS,
requestAndroid: requestAndroid,
gotoAppSetting: gotoAppPermissionSetting
}
module.exports = permission

  1. 注释：在使用微信小程序的时候，下载需要将域名配置一下白名单，否则没效果哦~~~
    最后就可以实现Android、Ios、微信小程序、H5多端下载图
xwq5201314
关注
uniapp，小程序下载图片和文件
m0_63811812的博客
05-25 1551
uniapp，小程序下载图片和文件
uniApp下载图片到手机相册，适配Android、Ios、微信小程序、H5
桃桃雾的博客
01-10 4545
uniApp下载图片到手机相册，适配Android、Ios、微信小程序、H5。
uniapp 微信小程序图片下载保存功能
最新发布
Binglianxiaojiao的博客
03-22 819
在开发这个功能之前，要先确保小程序的隐私条约是否加上相册（仅写入）权限，设置路径：微信公众平台->账号设置（左下角头像悬停）->用户隐私保护指引（去完善）->相册（仅写入）权限。首先使用uni.downloadFile方法将图片进行下载，然后再使用uni.saveImageToPhotosAlbum方法对下载后的临时图片路径进行保存到本地。
uniapp下载图片到本地
m0_73505556的博客
04-18 1731
【代码】uniapp下载图片到本地。
uniapp下载图片
weixin_56718509的博客
03-31 4269
uniapp点击下载图片，小程序下载图片到本地
uni-app下载图片
weixin_38536027的博客
02-17 459
uni-app下载图片
uniapp移动app实现将网页保存为图片到手机相册
02-04
本话题主要关注如何在uniapp中实现一个功能，即“将网页保存为图片并保存到手机相册”。这个功能在很多场合都十分实用，例如用户想保存网页内容作为参考或者分享给他人。 首先，我们需要理解uniapp的架构。uniapp是...
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
04-15
uniapp swiper 图片高度根据图片宽度自适应； 通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果； 滑动到某个要素位置时触发事件，如tab选项卡值更改等
基于UNIAPP框架的Vue手机壳DIY小程序前端设计源码
09-29
本项目采用UNIAPP框架和Vue技术，开发了一款手机壳DIY小程序的前端源码。UNIAPP是一个使用Vue.js开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台，使得开发者可以使用同一套代码实现...
uniapp实现 图片九宫格、可控制一行显示几个
04-29
使用uniapp 实现图片九宫格、完美动态适配手机各种尺寸、已抽离成组件 只需修改单个字段 实现页面布局、 class="pic-container" :style="{ paddingLeft: spacingNumber + 'px', paddingRight: ...
uni-app、H5+ 实现下载图片并保存到相册
qq_42966167的博客
12-28 8820
uni-app、H5+ 实现下载图片并保存到相册
uniapp获取（下载）图片
m0_49083276的博客
07-25 1404
【代码】uniapp获取（下载）图片。
uniapp下载网络图片并保存到手机
CZDBGSY的博客
11-02 603
uniapp 下载网络图片并保存到手机。
uni-app小程序实现下载图片
qq_44523450的博客
11-08 817
downImg(url){ const that = this; console.log("url",url) uni.downloadFile({ url:url,//url为图片地址 success: res => { console.log("下载结果res",res) if (res.statusCode === 200) { uni.saveImageToPhotosAlbum({
uni-app下载线上图片保存到相册
Edwin_jade的博客
07-26 886
下载图片
uniapp 下载图片到手机相册
m0_56007717的博客
04-25 337
我咋这里先请求uni.request的原因是我的下载链接是在接口里，直接调用下载方法uni.downloadFile拿不到下面放置下载链接的参数，所以我先调用uni.request方法先拿取这个参数之后在调用的下载方法。方法：uni.saveImageToPhotosAlbum是官方文档中有的作用是将下载的图片保存到本机相册中，建议大家在运行测试的时候可以放到模拟器测试，以上方法不支持在H5运行。uniapp官方封装好了下载的方法uni.downloadFile()先写一个下载按钮到页面上。
uniapp下载图片功能
weixin_61769998的博客
09-25 254
uniapp下载图片功能。
uniapp实现下载图片到本地
weixin_40923558的博客
11-16 2472
uniapp实现下载图片到本地
uniapp下载和上传照片
向来缘浅，奈何情深
07-09 1021
利用uniapp开发的时候，需要下载和上传照片，在H5和微信小程序中的写法不一样。
uniapp 保存图片到手机
10-29
UniApp是一个基于Vue.js的跨平台框架，用于快速构建原生应用。如果你想在 UniApp 中保存图片到用户的手机，可以使用其提供的File API结合wx.saveImageToPhotosAlbum（微信小程序环境）或native API（其他原生环境）。以下是一个基本示例： ```javascript // 微信小程序环境 uni.getImageInfo({ src: 'your-image-url', // 图片URL success(res) { const filePath = res.tempFilePath; // 获取临时文件路径 uni.saveImageToPhotosAlbum({ filePath: filePath, success() { console.log('图片已保存到相册'); }, fail(err) { console.error('保存失败', err); } }); } }); // 其他原生环境 import { saveImageToDeviceLibrary } from '@dcloudio/uni-app/dist/mini-program/api/device'; saveImageToDeviceLibrary({ url: 'your-image-url', success: () => { console.log('图片已保存到相册'); }, fail: (err) => { console.error('保存失败', err); } }); ``` 记得替换`'your-image-url'`为你实际需要保存的图片地址。在使用前，请确认你已经处理了权限请求，并且图片URL有效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值