鴻蒙實現一次上傳多張圖片

記錄初接觸鴻蒙,遇到的一個問題,

需求是點擊一個圖片上傳的+號圖,訪問本地圖片,可以選擇多張圖片并上傳。

下面是圖片上傳后的方法:

  //選擇圖片并上傳private async showPhotoPicker() {const maxImageCount = 3;const remainCount = maxImageCount - this.list.length;if (remainCount <= 0) {console.warn('最多只能上傳 3 張圖片');return;}const photoSelectOptions = new picker.PhotoSelectOptions();photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber = remainCount;const photoPicker = new picker.PhotoViewPicker();const result = await photoPicker.select(photoSelectOptions);if (result && result.photoUris) {const context = getContext(this);const newList: string[] = [];const newFilesList: request.File[] = [];for (const uri of result.photoUris) {if (this.list.length + newList.length >= maxImageCount) {break;}try {const fileType = 'jpg'; // 可拓展為通過 URI 判斷const fileName = `${Date.now()}_${Math.floor(Math.random() * 10000)}.${fileType}`;const copyFilePath = `${context.cacheDir}/${fileName}`;const file = fs.openSync(uri, fs.OpenMode.READ_ONLY);fs.copyFileSync(file.fd, copyFilePath);fs.closeSync(file.fd);newList.push(uri); // 保存原圖路徑用于本地預覽newFilesList.push({filename: fileName,type: fileType,name: 'img',uri: `internal://cache/${fileName}`});} catch (error) {console.error('圖片拷貝失敗:', error);}}// 合并已有和新選的,最多保留3個this.list = [...this.list, ...newList].slice(0, maxImageCount);this.filesList = [...this.filesList, ...newFilesList].slice(0, maxImageCount);}}private async handleSubmit() {if (this.filesList.length > 0) {try {console.log('filesList', json.stringify(this.filesList))const context = getContext(this);this.imageList = [];const filesArray = Array.from(this.filesList);const uploader = await request.uploadFile(context, {url:  '你的上傳文件接口',method: 'post',header: {'Content-Type': 'multipart/form-data'},files: filesArray,data: []});uploader.on('progress', (uploaded: number, total: number) => {console.log(`上傳進度: ${uploaded}/${total}`);});uploader.on('fail', (err: object) => {console.error('上傳失敗:', JSON.stringify(err));});uploader.on('headerReceive', (res: object) => {try {const resBody = JSON.parse(res['body'] ?? '{}') as uploadDataClass;console.log('上傳成功,返回內容:', resBody);if (resBody && resBody.status === '1' && Array.isArray(resBody.data)) {const newImageList = resBody.data.map((item) => {return {url: item.url} as UploadFileDtoClass;});this.imageList = [...this.imageList, ...newImageList];} else {console.warn('上傳接口返回格式不符合預期:', resBody);}} catch (err) {console.error('解析上傳結果失敗:', err);}});uploader.on('complete', (taskStates: Array<request.TaskState>) => {submitFeedback({'imgurls': this.imageList.map(item => item.url).join(','),其他數據}).then(res => {})})} catch (err) {console.error('上傳過程失敗:', err);}}}

這是調用:

 Image($r('app.media.xxx')).width('30%').height('auto').backgroundColor('#EEEEEE').borderRadius(4).onClick(() => {this.showPhotoPicker()})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/89991.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/89991.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/89991.shtml

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

相關文章

【STM32】CRC 校驗函數

先上一下 CRC校驗 的源代碼&#xff1a; void crc_check(unsigned char *ptr,unsigned int len) //crc為開源函數 {unsigned long wcrc0XFFFF;//預置16位crc寄存器&#xff0c;初值全部為1unsigned char temp;//定義中間變量int i0,j0;//定義計數for(i0;i<len;i)//循環計算每…

【Java】SVN 版本控制軟件的快速安裝(可視化)

目錄 一、SVN 的概述 1.1 SVN 的概念 1.2 SVN 與 Git 的對比 1.3 SVN 軟件 二、SVN 的安裝 2.1 SVN 的工作流程 2.2 服務器端 SVN 的安裝 三、SVN 服務器端的配置 3.1 搭建項目 3.2 權限控制 四、SVN 客戶端的配置 4.1 SVN 客戶端的下載 4.2 客戶端連接 SVN 服務器…

Hadoop安全機制深度剖析:Kerberos認證與HDFS ACL細粒度權限控制

Hadoop安全機制概述在大數據時代&#xff0c;Hadoop作為分布式計算框架的核心組件&#xff0c;其安全性直接關系到企業數據資產的保護。隨著數據價值的不斷提升&#xff0c;Hadoop安全機制已從早期的"簡單信任模式"演進為包含多重防護措施的綜合體系&#xff0c;其重…

uniapp基本使用

資料 咸蝦米視頻 黑馬視頻 uniapp官方文檔 hbuilder 1.uniapp頁面生命周期 1.1 onLoad 還拿不到dom適合接受上頁的參數&#xff0c;聯網取數據&#xff0c;更新data。相當于created和beforeCreated期間主要的作用是比如說獲取url上的query參數 *url: ***/**?name張三&…

ssh2-sftp-client 簡化 sftp 文件傳輸的 node庫

ssh2-sftp-client 極大地簡化了通過 sftp 進行文件傳輸的復雜性。無論你是需要上傳、下載、刪除文件&#xff0c;還是列出目錄內容&#xff0c;可當簡易的部署腳步npm run deploy const SftpClient require(ssh2-sftp-client) const sftp new SftpClient()const config {hos…

數字美元與全球支付革命:穩定幣的興起與全球金融格局的重塑

一、數字美元的崛起&#xff1a;美國戰略布局與全球競爭1. 數字美元的定位與戰略意義 數字美元作為美國構建“數字美元帝國”的核心工具&#xff0c;旨在通過區塊鏈技術實現美元的數字化發行與流通&#xff0c;鞏固其全球儲備貨幣地位。其核心邏輯在于&#xff1a;技術賦能貨幣…

LeetCode 633.平方數之和

給定一個非負整數 c &#xff0c;你要判斷是否存在兩個整數 a 和 b&#xff0c;使得 a2 b2 c 。 示例 1&#xff1a; 輸入&#xff1a;c 5 輸出&#xff1a;true 解釋&#xff1a;1 * 1 2 * 2 5 示例 2&#xff1a; 輸入&#xff1a;c 3 輸出&#xff1a;false 提示&…

Spring Boot 使用Jasypt加密

一、配置Jasypt 1.在pom.xml中導入依賴 <!-- Jasypt 加密工具 --><dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.5</version></dependency&…

【電影剖析】千鈞一發

目錄 1 人物介紹 2 電影名解讀 3 電影開頭 3.1 電影開頭的兩段話 3.2 片頭設計 4 電影正文 4.1 “杰羅米”各種詭異的行為 4.2 文森特 – 失敗的man 4.3 真正的杰羅米以及假基因身份證 4.4 文森特新征程 4.5 基因人的不容易 4.6 睫毛被查出有問題 4.7 文森特身份初…

論文略讀:Arcee’s MergeKit: A Toolkit for Merging Large Language Models

emnlp 2024在過去的一年里&#xff0c;開源大型語言模型&#xff08;LLMs&#xff09;迅速發展&#xff0c;并已可通過 Hugging Face 模型庫獲取。這些模型的訓練規模可達數萬億個 token&#xff0c;參數量通常在 1 億至 700 億以上不等開源模型檢查點涵蓋了多種任務&#xff0…

刀客doc:Netflix與YouTube開始在廣告戰場正面交鋒

01廣告一開始并不是Netflix的核心業務&#xff0c;但眼下&#xff0c;廣告正逐步成為這家公司與YouTube正面對抗的關鍵戰場。在上周剛發布的Q2財報里&#xff0c;Netflix廣告層已覆蓋全球12個核心市場&#xff0c;月活躍用戶已經逼近9400萬&#xff0c;主要集中在CTV滲透率高的…

(四)Unity3d-ROS聯合仿真:turtlebot在Unity3d中仿真

運行環境Ubuntu20.04Unity3d 1.下載運行 &#xff08;1&#xff09;項目下載地址&#xff1a; Robotics-Nav2-SLAM-Example 最好執行下面命令能將子模塊也下載 git clone --recurse-submodule gitgithub.com:Unity-Technologies/Robotics-Nav2-SLAM-Example.gitgit submodu…

信息學奧賽一本通 1553:【例 2】暗的連鎖

【題目鏈接】 ybt 1553&#xff1a;【例 2】暗的連鎖 【題目考點】 1. 樹上差分&#xff1a;邊差分 類似對差分序列進行修改可以完成對原序列的區間修改。對樹上邊差分進行修改可以完成對樹上一條路徑中所有邊的邊權進行修改。 一條邊的差分值為該邊的權值減去該邊連接的深…

二分查找-852.山峰數組的峰頂索引-力扣(LeetCode)

一、題目解析1.山峰數組數據嚴格滿足arr[0]<arr[1]……<arr[i]>arr[i1]……arr[arr.size()-1]2.時間復雜度要求為O(logN)二、算法解析解法1&#xff1a;暴力解法-O(N)遍歷數組arr&#xff0c;結合山峰數組性質&#xff0c;我們發現峰頂存在arr[i]>arr[i-1]&#xf…

高可用架構模式——數據集群和數據分區

目錄 一、數據集群 1.1、 數據集中集群 1.2、 數據集中集群的復雜度具體體現 1.3、數據分散集群 1.4、數據分散集群的復雜度具體體現 1.5、數據分散集群和數據集中集群的不同點 二、數據分區 2.1、數據分區架構需要考慮的因素 2.1.1、數據量 2.1.2、分區規則 2.1.3、復制規則 2…

上電復位斷言的自動化

POR是所有SoC設計的關鍵功能序列&#xff0c;其作用是將系統從任意狀態恢復至正常狀態。任何未被檢測到的POR缺陷都可能導致實際芯片中的災難性后果。復雜數量的重置邏輯給驗證工程師帶來了更大挑戰——他們需要在RTL仿真過程中捕捉這些設計缺陷。隨著SoC規模和復雜度的持續增長…

2025 年最新 AI 技術:全景洞察與深度解析?

2025 年最新 AI 技術&#xff1a;全景洞察與深度解析?在科技飛速發展的當下&#xff0c;AI 技術無疑是最耀眼的那顆星&#xff0c;持續為我們的生活與工作帶來前所未有的變革。步入 2025 年&#xff0c;AI 技術更是呈現出多點突破、全面開花的態勢&#xff0c;下面就為大家深入…

Vue項目中的AJAX請求與跨域問題解析

一、AJAX請求方式對比與選型1. 原生XHR方式基本使用示例&#xff1a;缺點分析&#xff1a;代碼冗長復雜回調地獄問題需要手動處理JSON轉換錯誤處理不夠直觀2. jQuery的AJAX基本使用示例&#xff1a;$.ajax({url: http://localhost:5000/api/data,type: GET,success: function(d…

使用 Longformer-base-4096 進行工單問題分類

簡述最近接了對Ticket 進行問題分類的任務&#xff0c;使用了prompt和機器學習兩種方式來解決&#xff0c;這里重點介紹Longformer-base-4096 模型訓練的方案使用 Longformer-base-4096 模型實現文本分類系統&#xff0c;利用 Longformer 處理長序列的能力進行準確分類。該解決…

Matplotlib和Plotly知識點(Dash+Plotly分頁展示)

Matplotlib和Plotly知識點&#xff08;DashPlotly分頁展示&#xff09;0、Matplotlib、Plotly和Dash區別 &#xff08;推薦用DashPlotly&#xff09;1.1、Matplotlib &#xff08;靜態圖&#xff09;1. Figures&#xff08;圖形&#xff09;概念創建Figure保存和顯示Figure2. S…