当前位置: 首页 > news >正文

uniapp实现远程图片下载到手机相册功能

在 UniApp 中实现点击下载图片到相册的功能,需要以下几个步骤:

1. 下载图片到本地(uni.downloadFile

2. 将图片保存到相册(uni.saveImageToPhotosAlbum

完整代码示例:

<template><view @click="downloadAndSaveImage">点击下载并保存图片</view>
</template><script>
export default {data() {return {imageUrl: 'https://example.com/your-image.jpg' // 替换为你的图片地址}},methods: {async downloadAndSaveImage() {try {// 1. 下载图片const { tempFilePath } = await new Promise((resolve, reject) => {uni.downloadFile({url: this.imageUrl,success: (res) => {if (res.statusCode === 200) {resolve(res);} else {reject(new Error('下载失败'));}},fail: (err) => {reject(err);}});});// 2. 获取相册权限await new Promise((resolve, reject) => {uni.getSetting({success: (res) => {if (!res.authSetting['scope.writePhotosAlbum']) {uni.authorize({scope: 'scope.writePhotosAlbum',success: resolve,fail: () => {uni.showToast({ title: '请开启相册权限', icon: 'none' });reject(new Error('未授权写入相册'));}});} else {resolve();}}});});// 3. 保存图片到相册await new Promise((resolve, reject) => {uni.saveImageToPhotosAlbum({filePath: tempFilePath,success: resolve,fail: (err) => {reject(err);}});});uni.showToast({ title: '保存成功' });} catch (err) {uni.showToast({ title: '保存失败', icon: 'none' });console.error(err);}}}
}
</script>

注意事项:

  • 跨域问题:确保图片 URL 支持跨域访问。
  • 合法域名:在小程序端使用时,图片 URL 必须配置在小程序后台的 下载域名白名单 中。
  • 权限申请:首次保存需用户主动触发授权(如点击按钮),不能自动静默执行。
  • 临时路径uni.downloadFile 返回的是临时路径,保存后可删除或复用。

可选增强功能:

  • 使用 uni.getImageInfo 预加载图片信息;
  • 添加 loading 状态提示;
  • 在 H5 端可用 <a download> 实现替代方案。

如果你有具体使用的平台(如微信小程序、H5、App)或其他需求,我们可以一起交流学习。

http://www.lqws.cn/news/505333.html

相关文章:

  • redis的安装及操作
  • 支持向量机(SVM):原理、实现与应用
  • Python核心库Pandas详解:数据处理与分析利器
  • 传输层协议TCP
  • 随机森林详解:原理、优势与应用实践
  • 【apache-maven3.9安装与配置】
  • C++ string类的操作
  • Python与Web3.py库交互实践
  • ref() 与 reactive()
  • Android中Navigation使用介绍
  • 跟着AI学习C#之项目实践Day5
  • 从0开始学习R语言--Day31--概率图模型
  • Blaster - Multiplayer P162-PXX
  • 系统性能优化-4 磁盘
  • 【Bluedroid】蓝牙启动之 bta_dm_enable 流程梳理 源码解析
  • 【AI落地应用实战】Chaterm:重新定义终端操作的AI智能工具
  • C# WinForm跨平台串口通讯实现
  • ffmpeg下载地址
  • 数组题解——移除元素​【LeetCode】
  • Windows驱动开发最新教程笔记2025(一)名词解释
  • Nginx SSL/TLS协议栈中配置深度解析与实践指南-优雅草卓伊凡
  • From Tranformer to Decoder ONLY
  • 云原生周刊:Argo CD v3.1 正式发布
  • PyEcharts教程(009):PyEcharts绘制水球图
  • 【HTTP】取消已发送的请求
  • Leaflet面试题200道
  • C++修炼:智能指针
  • 自然语言处理入门
  • centos7 rpm 包升级openssh至10.0版本
  • 解码成都芯谷金融中心文化科技产业园:文化+科技双轮驱动