uniapp 实现上传文件的功能

上传单个文件

<script setup>const handleUploadClick = () => {console.log("上传文件")uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;console.log("用户选择的图片:", tempFilePaths)uni.uploadFile({url: 'http://192.168.234.138:8889/upload', filePath: tempFilePaths[0],name: 'file',success: (uploadFileRes) => {console.log("上传文件成功", uploadFileRes.data);}});}});}
</script>
<template><view><view @click="handleUploadClick" class="button">上传文件</view></view>
</template><style scoped>.button {display: inline-block;background-color: aqua;padding: 10rpx 20rpx;border-radius: 5%;}
</style>

上传多个文件

上传多个文件的功能有个细节需要注意,那就是files不能直接使用读取到的文件列表,官方文档给出如下解释。
在这里插入图片描述

按照官方文档的要求,最终成功的代码如下:

<script setup>const handleUploadClick = () => {console.log("上传文件")uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;console.log("用户选择的图片:", tempFilePaths)let files = []for (let filePath of tempFilePaths){console.log("filePath", filePath)files.push({name: "file",uri: filePath,})}uni.uploadFile({url: 'http://192.168.234.138:8889/uploads', files: files,success: (uploadFileRes) => {console.log("上传文件成功", uploadFileRes.data);}});}});}
</script>
<template><view><view @click="handleUploadClick" class="button">上传文件</view></view>
</template><style scoped>.button {display: inline-block;background-color: aqua;padding: 10rpx 20rpx;border-radius: 5%;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络协同新纪元:Eureka引领分布式网络管理革命

网络协同新纪元&#xff1a;Eureka引领分布式网络管理革命 在微服务架构的浪潮中&#xff0c;服务的分布式网络管理成为了确保系统稳定性和可扩展性的关键。Eureka&#xff0c;作为Netflix开源的服务发现框架&#xff0c;提供了服务注册与发现的核心功能&#xff0c;为分布式网…

誉天教育与武汉晴川学院携手开展鸿蒙实训营,共筑鸿蒙生态新篇章!

在数字经济蓬勃发展的今天&#xff0c;鸿蒙系统作为华为自主研发的操作系统&#xff0c;正逐步构建起一个开放、协同、共赢的生态体系。为了进一步推动鸿蒙生态的繁荣发展&#xff0c;培养更多具备鸿蒙原生应用开发能力的专业人才&#xff0c;誉天教育与武汉晴川学院强强联合&a…

十九、【文本编辑器(五)】排版功能

目录 一、搭建框架 二、实现段落对齐 三、实现文本排序 一、搭建框架 (1) 在imgprocessor.h文件中添加private变量&#xff1a; QLabel *listLabel; //排序设置项QComboBox *listComboBox;QActionGroup *actGrp;QAction *leftAction;QAction *…

C#知识|SqlParameterCollection 只接受非空的 SqlParameter 类型对象,不接受 SqlParameter[] 对象

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 今天在练习C#时遇到报错&#xff1a; SqlParameterCollection 只接受非空的 SqlParameter 类型对象&#xff0c;不接受 SqlParameter[] 对象。 01 为什么使用SqlParameter 开发中之所以采用SqlParameter[]param是因为…

weblogic中间件运维常见问题

背景&#xff1a; 工作需要经常使用到weblogic中间件产品&#xff0c;在维护过程中有遇见的一些常见故障问题&#xff0c;这里分享给大家。 问题一&#xff1a;密码文件报错 问题描述&#xff1a; weblogic应用在启动过程中出现如下的报错内容&#xff1a; # tail -f nohup.ou…

五、 计算机网络(考点篇)试题

A、B、C都没问题&#xff0c;选D。现在基本上所有的互联网网站都是https了&#xff0c;电子支付类的更不用说了。 简单邮件传输的协议是SMTP(发)和POP3(收)&#xff0c;分别是25和110。选B和B 网络分片技术&#xff0c;分割切片嘛。 选C&#xff0c;AES加密等级比较高了&#x…

MFC程序创建word,创建表格,写入数据

文章目录 1、MFC程序功能&#xff1a;2、MFC程序实现2.1 创建项目2.2 添加word操作类2.3 添加word资源2.4 编写代码&#xff0c;实现将数据写入到word2.5 运行程序、验证功能3、工程代码下载 1、MFC程序功能&#xff1a; 创建word文档&#xff1b;向文档中写入字符串&#xff…

Jenkins用户权限管理指定操作任务

安装插件 在 Jenkins 的管理插件中进行插件安装。 搜索插件库&#xff1a;Role-based Authorization Strategy 修改授权策略 在全局安全配置中&#xff0c;把授权策略改为Role-Based Strategy 添加角色规则 在安全中选择Manage and Assign Roles 在Global roles中添加一个…

CentOS 7 中设置系统级代理

在 CentOS 7 中设置系统级代理需要几个步骤。以下是设置系统级代理的方法&#xff1a; 设置环境变量: 编辑 /etc/environment 文件&#xff1a; sudo nano /etc/environment添加以下行&#xff08;替换 proxy_server 和 port 为您的实际代理服务器地址和端口&#xff09;&am…

高效守护:在Eureka中构筑服务的分布式安全防线

高效守护&#xff1a;在Eureka中构筑服务的分布式安全防线 在微服务架构中&#xff0c;服务的安全性是保障整个系统稳定性和可靠性的基石。Eureka作为Netflix开源的服务发现框架&#xff0c;除了提供基本的服务注册与发现功能外&#xff0c;还能在服务的分布式安全策略中扮演重…

PyCharm 机器学习:打造高效数据可视化工作流

引言 在数据科学和机器学习领域&#xff0c;数据可视化不仅仅是美化报告的手段&#xff0c;它更是一种强大的沟通工具。通过图形&#xff0c;我们可以更快地发现数据模式、异常和趋势&#xff0c;使得洞察过程更为直接。PyCharm&#xff0c;凭借其丰富的集成特性和支持广泛的插…

Docker的虚拟化安装、常用命令和使用案例

文章目录 一、Docker的虚拟机安装1、完成虚拟机的更新2、完成Docker安装3、配置镜像加速器 二、Docker常用命令三、Docker的容器创建四、理解虚拟机中的Docker容器 一、Docker的虚拟机安装 1、完成虚拟机的更新 详见我的文章。 2、完成Docker安装 yum list installed|grep …

数据的力量:Facebook如何通过数据分析驱动创新

在当今数字化和信息化的时代&#xff0c;数据被认为是推动企业创新和发展的关键因素之一。作为全球最大的社交媒体平台&#xff0c;Facebook不仅积累了庞大的用户数据&#xff0c;还利用先进的数据分析技术&#xff0c;不断探索和实现新的创新。本文将深入探讨Facebook如何通过…

知识付费小程序源码 thinkphp后台 带3000多条教程数据

知识付费小程序源码 thinkphp后台 带3000多条教程数据,云码素材有进行了更新开发,更新了广告位管理,后台一键更新数据,用户登录 不单单是一个源码,我们对接了云码素材的教程资源,也就是说你可以免费拥有云码素材所有教程资源,后台一键更新,无须自己再更新资源,每天有我们更新,…

​iredmail邮件系统如何有效配置SMTP服务器?​

iredmail邮件系统安全性如何保障&#xff1f;怎么选择邮件系统&#xff1f; SMTP是发送邮件的标准协议&#xff0c;设置正确的SMTP服务器可以保证邮件能够顺利发送到接收者的收件箱中。AokSend将详细介绍在iredmail邮件系统中如何配置SMTP服务器&#xff0c;以确保您的邮件系统…

EPLAN 去掉PDF中的红色跳转标识

EPLAN PDF图纸导出后体验跳转标识会有红色标识&#xff0c;如何去掉呢&#xff1f;下面介绍一下方法&#xff1a; 此为现象&#xff1a; EPLAN 2.9的帮助文档里提示&#xff1a; 在导出的 PDF 文档中&#xff0c;跳转后的跳转目标现在通过红色的闪烁框进行标识。可能的跳转目…

RocketMQ控制台(rocketmq-dashboard/)

RocketMQ控制台的官网&#xff1a;RocketMQ控制台官网 页面往下拉 用户指导 https方式访问rocketmq-dashboard

无线传感器网络构建:STM32F103C8T6与HC-05模块的协同工作

摘要 随着物联网技术的发展&#xff0c;无线传感器网络(WSN)在智能环境监测、工业自动化等领域扮演着越来越重要的角色。本文将指导读者如何使用STM32F103C8T6微控制器与HC-05蓝牙模块构建一个基础的无线传感器网络&#xff0c;并实现节点间的协同工作。 1. 引言 无线传感器…

书生大模型实战入门:python

任务&#xff1a; 闯关任务 Python实现wordcount 15mins 闯关任务 Vscode连接InternStudio debug笔记 15mins 闯关任务 Python实现wordcount 闯关任务 Vscode连接InternStudio debug笔记

目标检测--X-anylabeling使用自己的模型自动标注

一、x-anylabeling安装教程 x-anylabeling安装教程——软件安装教程——X-AnyLabeling 安装与自动标注 二、x-anylabeling使用自己的模型标注&#xff08;YOLOv5 v6.0&#xff09; 2.1 训练权重.pt转onnx 环境配置 将requiements.txt中export部分的注释恢复 然后pip insta…