记录初接触鸿蒙,遇到的一个问题,

需求是点击一个图片上传的+号图,访问本地图片,可以选择多张图片并上传。

下面是图片上传后的方法:

  //选择图片并上传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…