uni-app移动端保存图片到本地相册

本文介绍如何使用uni-app的uni.downloadFile和uni.saveImageToPhotosAlbum接口组合实现将远程图片下载并保存到手机相册的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uni-app移动端保存图片到本地相册

uni-app中有一个接口:uni.saveImageToPhotosAlbum,但是之前使用的时候,真机测试没有问题,但是打了安装包就保存失败,走的是fail回调。
捉摸了两天,后来又看到一个接口:uni.downloadFile,这个也可以把图片下载下来,但是没有在系统相册里面看到,是在一个忘记路径的麻烦的文件夹里面。
然后又在想,uni.downloadFile在成功回调里面会返回 tempFilePath,一个临时文件路径,在成功的回调函数调用 uni.saveImageToPhotosAlbumuni.saveImageToPhotosAlbum,所需要的路径参数使用 tempFilePath 即可。

uni.downloadFile({
		url: 'https://www.fb0b1a26523c33400f66f.jpg',
		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"
						});
					}
				});
			}
		}
	})
### uni-app 中实现图片选择与上传功能 在开发基于 `uni-app` 的应用时,可以通过调用其内置 API 来完成图片的选择和上传操作。以下是具体方法以及示例代码。 #### 一、图片选择功能 `uni-app` 提供了 `uni.chooseImage` 方法用于从相册或相机中选取图片。该方法支持多选或多张图片的同时获取,并可以设置图片的质量和其他参数[^1]。 ```javascript function selectImages() { uni.chooseImage({ count: 9, // 默认最多可以选择的图片数量 sizeType: ['original', 'compressed'], // 可以指定原图或者压缩图 sourceType: ['album', 'camera'], // 从相册还是相机选择 success(res) { const tempFilePaths = res.tempFilePaths; // 获取临时路径数组 console.log('Selected images:', tempFilePaths); uploadImages(tempFilePaths); // 调用上传函数 }, fail(err) { console.error('Failed to choose image:', err); } }); } ``` #### 二、图片上传功能 为了将选定的图片上传到服务器,可使用 `uni.uploadFile` 方法。此方法允许开发者向远程服务器发送文件数据流,并接收响应结果。 下面是一个完整的例子,展示如何结合 AWS S3 或其他云存储服务来执行实际的任务: ```javascript function uploadImages(filePaths) { filePaths.forEach(filePath => { uni.uploadFile({ url: 'https://your-server-endpoint/upload', // 替换为目标服务器地址 filePath, name: 'file', formData: { appid: 'your-dcloud-app-id' }, // 添加额外表单字段 [^2] success(uploadRes) { const response = JSON.parse(uploadRes.data); if (response.success) { console.log(`Uploaded successfully! URL=${response.url}`); } else { console.warn('Upload failed with server-side error.'); } }, fail(error) { console.error('Error during file upload:', error); } }); }); } ``` > **注意**: 上述代码中的 `'https://your-server-endpoint/upload'` 和 `'your-dcloud-app-id'` 需要替换为你自己的配置项。前者应指向能够接受 HTTP POST 请求并保存文件的服务端接口;后者则依据 DCloud 平台上的项目设定填写相应的 App ID 值。 --- ### 总结说明 上述两部分分别介绍了如何利用 `uni.app` 进行本地图片挑选 (`chooseImage`) 和网络传输 (`uploadFile`) 的过程。通过合理组合这两个核心组件,即可轻松构建起一套简易却高效的移动端图像管理解决方案。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值