【微信小程序】保存多张图片到本地相册 uni.saveVideoToPhotosAlbum保存视频 uni.saveImageToPhotosAlbum保存图片

文章讲述了在微信小程序中如何使用UViewUI库的Swiper组件展示图片,并提供了两种方法实现将图片保存到手机相册的功能,包括单张下载和批量下载的示例代码。

在这里插入图片描述

<template>
	<view class="container">
		<u-swiper :list="list" circular radius='0' indicator indicatorMode='dot' height='950rpx'></u-swiper>
	
	<view class="btn btn2" @click="saveFun">保存到相册</view>
	
	</view>
</template>

<script>
	export default {
   
   
		components: {
   
   },
		data() {
   
   
			return {
   
   
			
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad(option) {
   
   },
		methods: {
   
   
			// 保存到相册 
			saveFun
UniApp X 中,`uni.chooseMedia` 是一个用于选择照片或视频的 API,但它本身并不会直接将文件保存到指定目录。要实现将用户通过 `uni.chooseMedia` 拍摄或选择的媒体文件保存到指定目录,需要结合 `uni.saveVideoToPhotosAlbum` 或 `uni.saveImageToPhotosAlbum` 以及文件系统 API(如 `uni.getFileSystemManager` 和 `uni.copyFile`)来完成。 以下是一个完整的示例,展示如何将用户选择的视频或照片保存到自定义目录中: ### 示例代码: ```html <template> <view> <button @click="chooseMedia">选择媒体</button> <text v-if="filePath">{{ filePath }}</text> </view> </template> <script> export default { data() { return { filePath: '' }; }, methods: { async chooseMedia() { try { const res = await uni.chooseMedia({ count: 1, mediaType: ['image', 'video'], sourceType: ['album', 'camera'], maxDuration: 60, }); const tempFilePath = res.tempFiles[0].tempFilePath; this.filePath = tempFilePath; // 判断是图片还是视频 if (tempFilePath.endsWith('.mp4') || tempFilePath.endsWith('.mov')) { await this.saveVideo(tempFilePath); } else { await this.saveImage(tempFilePath); } uni.showToast({ title: '保存成功' }); } catch (err) { uni.showToast({ title: '保存失败', icon: 'none' }); console.error(err); } }, async saveImage(tempFilePath) { // 保存相册 await uni.saveImageToPhotosAlbum({ filePath: tempFilePath }); // 或者自定义路径保存(需要授权写入文件系统) const fs = uni.getFileSystemManager(); const destPath = `${wx.env.USER_DATA_PATH}/my_images/${Date.now()}.jpg`; try { await fs.copyFile({ srcPath: tempFilePath, destPath: destPath, }); console.log('图片保存到自定义路径:', destPath); } catch (e) { console.error('保存失败:', e); } }, async saveVideo(tempFilePath) { // 保存相册 await uni.saveVideoToPhotosAlbum({ filePath: tempFilePath }); // 或者自定义路径保存 const fs = uni.getFileSystemManager(); const destPath = `${wx.env.USER_DATA_PATH}/my_videos/${Date.now()}.mp4`; try { await fs.copyFile({ srcPath: tempFilePath, destPath: destPath, }); console.log('视频保存到自定义路径:', destPath); } catch (e) { console.error('保存失败:', e); } } } }; </script> ``` --- ### 代码解释: 1. **`uni.chooseMedia`**: - 允许用户从相册或相机中选择媒体文件(图片视频)。 - `mediaType` 指定可以选择的媒体类型。 - `sourceType` 控制来源(相册或摄像头)。 - `tempFilePath` 是返回的临时路径。 2. **`uni.saveImageToPhotosAlbum` 和 `uni.saveVideoToPhotosAlbum`**: - 将图片视频保存到系统相册,需要用户授权。 3. **`uni.getFileSystemManager()` 和 `fs.copyFile()`**: - 使用文件系统 API 将临时文件复制到自定义路径。 - `wx.env.USER_DATA_PATH` 是小程序本地文件根目录。 - 可以创建子目录(如 `my_images`、`my_videos`)用于分类存储。 --- ### 注意事项: - **权限问题**:在部分平台(如微信小程序)中,保存相册或访问文件系统需要用户授权。 - **路径问题**:`wx.env.USER_DATA_PATH` 是 UniApp X 中的本地存储路径,适用于大部分小程序平台。 - **平台兼容性**:不同平台(如微信、H5、App)的文件系统 API 实现可能略有不同,建议使用条件编译处理。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值