uniapp 实现上传文件的功能

news2024/11/15 7:57:08

上传单个文件

<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.coloradmin.cn/o/1928252.html

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

相关文章

华为HCIP Datacom H12-821 卷40

1.单选题 下面是台路由器BGP错误输出信息&#xff0c;关于这段信息描述错误的是 <HUAWEI>display bgp error Error Type :Peer Error Date/Time :2010-03-22 12:40:39 Peer Address :10.1.1.5 Error Info : Incorrect remote AS A、可能是由于邻居…

二叉树 —— OJ题目详解

1.二叉树的前序遍历 二叉树的前序遍历比较简单&#xff0c;但是在力扣上写这个接口需要注意几个点&#xff1a; int* preorderTraversal(struct TreeNode* root, int* returnSize) {} preorderTraversal 的返回值是动态开辟的数组&#xff0c;里面存放的是前序遍历的顺序int*…

Python 获取今天(当天)、昨天(前一天)、前天(昨天的前一天)的开始时间、结束时间

描述&#xff1a;我这里是封装成DatetimeHelper工具类来调用 1.今天(当天)开始时间、结束时间 from datetime import datetime, timedeltaclass DatetimeHelper:# 获取今天(当天)的开始时间、结束时间(datetime类型)staticmethoddef getTodayStartEnd():# 获取当前的日期now …

JVM监控及诊断工具-命令行篇--jinfo命令介绍

JVM监控及诊断工具-命令行篇02-jinfo&#xff1a;实时查看和修改JVM配置参数 一 基本情况二 基本语法2.1查看jinfo -sysprops PIDjinfo -flags PIDjinfo -flag 具体参数 PID 2.2修改 三 拓展java -XX:PrintFlagsInitialjava -XX:PrintFlagsFinaljava -XX:PrintCommandLineFlags…

IP风险画像 金融行业的安全盾牌

在当今数字化时代&#xff0c;金融行业面临着前所未有的安全挑战。随着在线交易和数字银行业务的迅猛发展&#xff0c;欺诈和网络攻击的威胁也在不断增加。金融机构需要高效、可靠的安全解决方案来保护客户的资产和个人信息&#xff0c;防止各种形式的欺诈行为。 IP风险画像是…

el-date-picker手动输入日期,通过设置开始时间和阶段自动填写结束时间

需求&#xff1a;根据开始时间&#xff0c;通过填写阶段时长&#xff0c;自动填写结束时间&#xff0c;同时开始时间和节数时间可以手动输入 代码如下&#xff1a; <el-form ref"ruleForm2" :rules"rules2" :model"formData" inline label-po…

# Redis 入门到精通(四)-- linux 环境安装 redis

Redis 入门到精通&#xff08;四&#xff09;-- linux 环境安装 redis 一、linux 环境安装 redis – 基于 Linux 安装 redis 1、基于 Center 0S7 或者 unbunt-18.04 安装 Redis 1&#xff09;下载安装包wget http://download.redis.io/releases/redis-?.?.?.tar.gz 如&…

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

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

关于SQLException: Illegal mix of collations (`utf8mb4_general_ci,IMPLICIT`)...错误

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境 二、报错信息三、最后 开篇说明 记录一个查询错误 场景&#xff1a;数据库之间某表复…

Nginx的反向代理缓存

一 .Nginx的反向代理缓存 #代理缓存路径设置缓存保存的目录 #keys_zone设置共享内存占用的空间大小 #max_size缓存大小 #inactice 超过时间,则缓存自动清理 #use_temp_path 关闭临时目录proxy_cache_path /usr/local/nginx/upsteam_cache key_zone=mycache:5m max_size=…

51单片机STC89C52RC——19.1 SG90舵机(伺服电机)

目的/效果 独立按键K1&#xff0c;K2 实现加舵机减角度增减&#xff0c;LCD1602显示舵机转角度数&#xff08;上电默认90度&#xff09; 一&#xff0c;STC单片机模块 二&#xff0c;SG90舵机 2.1 简介 舵机只是我们通俗的叫法&#xff0c;它的本质是一个伺服电机&#xf…

活动预告|想更了解流式数据湖?亚马逊云科技数据开源软件-流式数据湖 Tech Talk来啦!

活动介绍 本次活动旨在探索在亚马逊云科技上构建和使用开源数据软件产品的一些最佳实践&#xff0c;特别关注流式数据湖的构建。活动将在线上举行&#xff0c;汇聚来自 AutoMQ Apache paimon和亚马逊云科技的顶尖专家&#xff0c;分享他们在这一领域的最新进展和实际经验。参与…

分类预测 | Matlab实现OOA-LSSVM鱼鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断

分类预测 | Matlab实现OOA-LSSVM鱼鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断 目录 分类预测 | Matlab实现OOA-LSSVM鱼鹰算法优化最小二乘支持向量机多特征分类预测/故障诊断分类效果基本介绍程序设计参考资料 分类效果 基本介绍 分类预测 | Matlab实现OOA-LSSVM鱼…

【Docker】Docker 的数据管理与镜像创建

目录 一.数据管理 1.数据卷 2.数据卷容器 二.端口映射 三.容器互联 四.Docker 镜像的创建 1.基于现有镜像创建 1.1.首先启动一个镜像&#xff0c;基于镜像创建容器&#xff0c;更新容器内容 1.2.将修改后的容器提交为新的镜像&#xff0c;需要使用该容器的 ID 号创建新…

git取消合并:--hard 或 --merge

第一步&#xff1a;查了git日志 git reflog如下&#xff0c;运行上述命令后&#xff0c;可以看见所有的提交哈希&#xff08;id&#xff09; 第二步 查看到上述所有的提交记录后&#xff0c;有如下方法去回退 方法1&#xff1a;--hard 确定上一次提交的哈希值 git reset…

低空经济持续发热,无人机培训考证就业市场及前景剖析

随着科技的不断进步和社会需求的日益增长&#xff0c;低空经济已成为全球及我国经济增长的新引擎。作为低空经济的重要组成部分&#xff0c;无人机技术因其广泛的应用领域和显著的经济效益&#xff0c;受到了社会各界的广泛关注。为满足市场对无人机人才的需求&#xff0c;无人…

object-C 解答算法:两数之和(leetCode-1)

两数之和(leetCode-1) 题目如下图:(也可以到leetCode上看完整题目,题号1) 解答方法一: 最简单的方法就是双指针遍历数组.代码如下 - (NSMutableArray *)sumOfTwoNumbers:(NSMutableArray *)array target:(int)target {NSMutableArray * resultArray [[NSMutableArray alloc…

怎样去除视频上的水印和文字,视频水印文本移除教程

在观看和分享视频时&#xff0c;我们经常会遇到带有水印或额外文字的情况。这些标记有时是为了版权保护&#xff0c;有时则是平台的标识&#xff0c;但在某些情况下&#xff0c;它们可能会干扰视频的观赏体验。本文将向你介绍常见的视频水印类型以及如何使用简鹿水印助手去除这…

漏洞复现 | Showdoc反序列化

非常简单的一个靶场 靶场地址&#xff1a;https://hack.zkaq.cn/ 打开靶场&#xff0c;弹出了这种登录框&#xff0c;这也成为了后面的一个坑点&#xff0c;记住这个登录框。 看到了注册功能&#xff0c;showdoc有注册功能我们就不用尝试前台SQL注入了&#xff0c;直接注册…

—张pdf怎么分割成多页,怎么把一个pdf分割

在数字化时代&#xff0c;pdf文件已经成为我们工作和生活中不可或缺的一部分。然而&#xff0c;有时候我们可能会遇到需要将一张pdf文件分割成多页的情况。无论是为了便于分享&#xff0c;还是为了满足特定的文档格式要求&#xff0c;这个任务都可能变得相当棘手。但别担心&…