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.pswp.cn/web/86458.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/86458.shtml
英文地址,請注明出處:http://en.pswp.cn/web/86458.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【世紀龍科技】吉利博瑞汽車車身診斷與校正仿真教學軟件

在汽車產業蓬勃發展的當下&#xff0c;汽車車身診斷與校正技術人才的需求與日俱增。然而&#xff0c;職業院校在汽車車身教學實踐中&#xff0c;卻面臨著學生實訓機會稀缺、教學互動匱乏、過程評價缺失、學生技能提升緩慢等諸多難題。江蘇世紀龍科技憑借其卓越的技術實力與行業…

極速二刷leetcode hot100

簡單題 1.移動0 283. 移動零 - 力扣&#xff08;LeetCode&#xff09; 剛開始沒看到非零子串的順序不變&#xff1a; // if(nums.size() 1){// return;// }// //所有 0 移動到數組的末尾//同時保持非零元素的相對順序。// int n nums.size();// int notZero n-1;////…

技術博客:如何用針孔相機模型理解圖像

引言 大家好&#xff01;今天我們來聊聊一個非常有趣的話題——針孔相機模型。這個模型可以幫助我們理解相機是如何捕捉圖像的。我們會用一些簡單的數學公式來解釋這個過程&#xff0c;不用擔心&#xff0c;我會盡量讓這些內容簡單易懂。 什么是針孔相機模型&#xff1f; 針…

Nanonets-OCR:Qwen2.5VL-3B的微調模型 更強大的文檔解析能力|附效果實測

一 Nanonets-OCR 簡介 Nanonets-OCR不再滿足于單純提取文本&#xff0c;它能智能解析圖像中的公式、表格、水印、簽名、圖表、復選框等復雜結構&#xff0c;并輸出格式清晰的 Markdown。 核心功能 ● LaTeX 公式識別&#xff1a;自動將文中數學公式轉為標準 LaTeX 格式 ●…

Git下載與使用完全指南:從安裝到基礎操作詳解,附上git的學習網站(很直觀)(可以模擬git的全過程)

一、Git簡介與下載安裝 1.1 Git是什么&#xff1f; Git是目前世界上最先進的分布式版本控制系統&#xff0c;由Linus Torvalds&#xff08;Linux之父&#xff09;開發。它可以高效地處理從小型到大型項目的版本管理&#xff0c;具有以下特點&#xff1a; 分布式架構&#xff…

論分布式設計

20250419-作 題目 分布式是指將一個系統或任務分解成多個子部分&#xff0c;并在多個計算機或服務器之間進行協同工作的方式。每個子部分都可以在不同的計算機節點上運行&#xff0c;彼此之間通過網絡進行通信和協調。分布式技術在當今互聯網應用中起著重要作用&#xff0c;例…

Vue樣式綁定與條件渲染詳

一、Vue樣式綁定 在Vue中&#xff0c;我們可以通過多種方式動態地綁定樣式&#xff0c;讓界面根據數據狀態變化而自動更新樣式。 1. class樣式綁定 (1) 字符串寫法 適用場景&#xff1a;樣式的類名不確定&#xff0c;需要動態指定 <template><div><!-- 綁定…

固態電池火熱-美國固態電池企業QuantumScape宣布,產能規模化邁出了重要一步

美國固態電池企業QuantumScape宣布&#xff0c;其先進的Cobra隔膜工藝已成功集成到基線電池生產中&#xff0c;標志著公司生產能力規模化邁出了重要一步。 添加圖片注釋&#xff0c;不超過 140 字&#xff08;可選&#xff09; 600478 科力遠 業績固態電池 | 1.科力遠發布20…

Python 商務數據分析—— NumPy 學習筆記Ⅰ

一、NumPy 簡介 1.1 NumPy 特性 高性能科學計算庫&#xff1a;專為處理多維數組設計&#xff0c;底層用 C 語言實現&#xff0c;運算速度遠超 Python 原生列表。 矢量運算&#xff1a;支持批量數據操作&#xff0c;避免顯式循環&#xff0c;代碼更簡潔高效。 廣播機制&…

中州養老:搭建環境(第二節)

目錄 項目初始工程搭建: 不同項目需要的前后端環境也不同 前端項目搭建: 熟悉模塊的方式 代碼閱讀 如何開發一個接口 Swagger(接口文檔) Api注解的說明 ???????項目初始工程搭建: 公司項目分兩種,新立項目(0-1)和已有項目開發(1-2) 熟悉項目結構,每個模塊對應的…

[1-01-01].第78節:Java8新特性 - Lambda表達式

java基礎語法大綱 一、Lambda 表達式 1.1.概述&#xff1a; 1.Lambda 是一個匿名函數&#xff0c;我們可以把 Lambda 表達式理解為是一段可以傳遞的代碼&#xff08;將代碼像數據一樣進行傳遞&#xff09;2.使用Lambda 表達式可以寫出更簡潔、更靈活的代碼。作為一種更緊湊的…

【2025.6.27 校內 NOI 模擬賽】總結(貪心, 容斥、組合計數, dsu on tree、 虛樹)

文章目錄 時間安排反思題解[六省聯考 2017] 期末考試&#xff08;貪心&#xff0c; 枚舉&#xff09;[JSOI2019] 神經網絡&#xff08;容斥&#xff0c; 組合計數&#xff0c; 樹背包&#xff09;[ZJOI2019] 語言&#xff08;dsu on tree&#xff0c; 虛樹&#xff0c; 結論&am…

實際前端開發中,常用指令的封裝

實際前端開發中&#xff0c;常用指令的封裝 全局指令處理步驟main.ts指令目錄結構src/directives/index.ts 一、輸入框空格禁止指令1、指令文件clearSpace.ts2、指令使用 全局指令處理步驟 main.ts import { createApp } from "vue"; import App from "./App.…

鴻蒙OH南向開發 輕量系統內核(LiteOS-M)【異常調測】

基本概念 OpenHarmony LiteOS-M提供異常接管調測手段&#xff0c;幫助開發者定位分析問題。異常接管是操作系統對運行期間發生的異常情況進行處理的一系列動作&#xff0c;例如打印異常發生時異常類型、發生異常時的系統狀態、當前函數的調用棧信息、CPU現場信息、任務調用堆棧…

算法-堆排序

文章目錄 整體架構流程技術細節小結 整體架構流程 大頂推&#xff1a;是構建一個完整的二叉樹 大頂推&#xff1a;即父節點的值大于左右子樹的值。 循環構建大頂推 在給定的數組&#xff0c;既可以明確樹的高度。 在循環的時候&#xff0c;構建樹的高度從lgn至0。即從堆低往堆…

【鴻蒙HarmonyOS Next App實戰開發】二維碼生成技術實現與解析

隨著移動應用開發中對便捷交互體驗的需求日益增長&#xff0c;二維碼作為信息傳遞的重要載體&#xff0c;其生成與使用變得越來越普遍。本文將基于鴻蒙HarmonyOS應用開發框架&#xff0c;詳細介紹如何實現一個功能完備的二維碼生成器&#xff0c;并附上完整代碼解析。 注意該實…

1 Studying《Is Parallel Programming Hard》6-9

目錄 Chapter 6 Partitioning and Synchronization Design 6.1 分區練習 6.2 設計準則 6.3 同步粒度 6.4 并行快速路徑 6.5 超越黨派分歧 6.6 分區、并行和優化 Chapter 7 Locking 7.1 活命 7.2 鎖的類型 7.3 鎖定實施問題 7.4 基于鎖的存在性保證 7.5 鎖定&a…

Java練習題精選16-20

Java練習題精選16-20 一、第十六題二、第十七題三、第十八題四、第十九題五、第二十題一、第十六題 現有一個存放學生成績的數組{66, 77, 88, 99},要求將該數組正序輸出每個下標所對應的元素。 public class Test {public static void main(String[] args) {int<

新能源知識庫(68)汽車電鍍與蒸汽

汽車電鍍是提升零部件耐磨性、抗腐蝕性和美觀性的關鍵工藝&#xff0c;其流程根據基材&#xff08;金屬或塑料&#xff09;和部件功能需求有所差異。 汽車電鍍是以 基材特性和 功能需求為導向的精密工藝&#xff1a; ?金屬件?&#xff1a;核心流程為 ?除油→酸洗→電鍍→鈍…

Veo 3 視頻生成大模型完整操作教程(2025)

隨著 AI 多模態能力的飛躍&#xff0c;Google DeepMind 發布的 Veo 3 成為了生成視頻領域的一顆重磅炸彈。它不僅能夠根據文本生成高質量的視頻畫面&#xff0c;還能同步生成對白、背景音和環境音&#xff0c;是目前最接近真正“AI 導演”的大模型。 本文將帶你詳細了解 Veo 3…