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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构(复杂度)

复杂度 算法在编写成可执行程序后&#xff0c;运⾏时需要耗费时间资源和空间(内存)资源。因此衡量⼀个算法的好 坏&#xff0c;⼀般是从时间和空间两个维度来衡量的&#xff0c;即时间复杂度和空间复杂度。 时间复杂度主要衡量⼀个算法的运⾏快慢&#xff0c;⽽空间复杂度主要…

VsCode 与远程服务器 ssh免密登录

首先配置信息 加入下列信息 Host qb-zn HostName 8.1xxx.2xx.3xx User root ForwardAgent yes Port 22 IdentityFile ~/.ssh/id_rsa 找到自己的公钥&#xff0c;不带pub是私钥&#xff0c;打死都不能给别人。复制公钥 拿到公钥后&#xff0c;来到远程服务器 vim ~/.ss…

vue的学习--day1

一、软件的安装 首先&#xff0c;安装vscode,这个安装好像没有什么需要注意的点&#xff0c;如果不放心的话就网上找个博客&#xff0c;跟着步骤安装即可。 安装完成之后&#xff0c;在组件&#xff08;下图&#xff09;中安装相应的插件。首先建议英文和我一样不好的&#x…

buuctf-web

先输入127.0.0.1查找本地 得到网页目录&#xff0c;再输入127.0.0.1|ls查找下一级 得到php文件&#xff0c;127.0.0.1 | ls /返回上级目录 127.0.0.1 | cat /flag得到flag

【ARMv8/v9 异常模型入门及渐进 9.1 - FIQ 和 IRQ 打开和关闭】

请阅读【ARMv8/v9 ARM64 System Exception】 文章目录 FIQ/IRQ Enable and Disable汇编指令详解功能解释使用场景和注意事项 FIQ/IRQ Enable and Disable 在ARMv8/v9架构中&#xff0c;可以使用下面汇编指令来打开FIQ和 IRQ,代码如下&#xff1a; asm volatile ("msr da…

[Linux]CentOS软件的安装

一、Linux 软件包管理器 yum 1.Linux安装软件的方式 在linux中安装软件常用的有三种方式&#xff1a; 源代码安装&#xff08;我们还需要进行编译运行后才可以&#xff0c;很麻烦&#xff09; rpm安装&#xff08;Linux的安装包&#xff0c;需要下载一些rpm包&#xff0c;但是…

怎么把自己写的组件发布到npm官方仓库??

一.注册npm账号 npm官网 1.注册npm 账号 2.登陆 3.登陆成功 二.搭建一个vue 项目 具体步骤参考liu.z Z 博客 或者初始化一个vue项目 vue create XXX &#xff08;工程名字&#xff09;运行代码 npm run serve三.组件封装 1.在src文件下建一个package文件&#xff0…

力扣 二叉树 相关题目总结3

目录 一、 222 完全二叉树的节点个数 题目 题解 方法一&#xff1a;递归法 方法二&#xff1a; 二、257 二叉树的所有路径 题目 题解 方法一&#xff1a;递归法 方法二&#xff1a;回溯法 三、04 左叶子之和 题目 题解 一、 222 完全二叉树的节点个数 题目 给你…

元服务体验-服务发现

服务发现&#xff0c;无论线上或线下的方式都可以发现元服务。 线上&#xff1a;基于用户意图。从精准意图的搜索、用户事件触发的推荐到主动探索等场景。用户可以在设备的负一屏、全局搜索、应用市场、桌面等场景发现元服务。 线下&#xff1a;用户在 HarmonyOS Connect标签…

网络安全 DVWA通关指南 DVWA Brute Force (爆破)

DVWA Brute Force (爆破) 文章目录 DVWA Brute Force (爆破)LowMediumHighImpossible Low 1、分析网页源代码 <?php// 检查是否存在"Login" GET 参数&#xff0c;这通常是提交登录表单后触发的动作 if( isset( $_GET[ Login ] ) ) {// 获取POST方式提交的用户名…

rancher单节点安装k8s

k3s 优点: 可用性 易于操作的轻量级部署模型 缺点: 与上游Kubernetes不同 RKE1 优点: 与上游Kubernetes紧密对齐 缺点: 严重依赖于 Docker RKE2 凭借 k3s 的优势和更紧密的上游协调&#xff0c;RKE2 将控制平面组件作为静态 pod 启动&#xff0c;由 kubelet 管理。 为了符合行业…

Gitlab CI/CD --- use a sample CI/CD template

0 Preface/Foreword Pipeline, job, stage的关系如下描述&#xff1a; A pipeline is composed of independent jobs that run scripts, grouped into stages. Stages run in sequential order, but jobs within stages run in parallel. 关键信息&#xff1a; pipeline由独…

前端路由手写Hash和History两种模式

文章目录 1. Hash模式&#xff1a;简洁而广泛适用2. History模式&#xff1a;更自然的用户体验3. 结论 在现代Web开发中&#xff0c;单页面应用&#xff08;Single Page Application&#xff0c;简称SPA&#xff09;因其流畅的用户体验和高效的页面交互能力而备受青睐。前端路由…

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

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

LeetCode-返回链表倒数第K个节点、链表的回文结构,相交链表

一、返回链表倒数第k个节点 . - 力扣&#xff08;LeetCode&#xff09; 本体思路参展寻找中间节点的方法&#xff0c;寻找中间节点是定义快慢指针&#xff0c;快指针每次走两步&#xff0c;慢指针每次走一步&#xff0c;当快指针为空或者快指针的下一个节点是空时&#xff0c;…

maven项目容器化运行之2-maven中使用docker插件调用远程docker构建服务并在1Panel中运行

一.背景 公司主机管理小组的同事期望我们开发的maven项目能够在1Panel管理的docker容器部署。上一篇写了先开放1Panel中docker镜像构建能力maven项目容器化运行之1-基于1Panel软件将docker镜像构建能力分享给局域网-CSDN博客。这一篇就是演示maven工程的镜像构建、容器运行、运…

TCP/IP地址管理

TCP/IP中使用IP地址来确定网络上的一台主机 IPV4协议中&#xff0c;32位&#xff08;4个字节&#xff09;源IP地址和32位目的IP地址&#xff0c;也就是可以表示2^3242亿9千万个地址 如今随着互联网甚至物联网的迅速发展&#xff0c;我们面临着IP地址数量不充足的问题&#xf…

一款IM即时通讯聊天系统源码,包含app和后台源码

一款IM即时通讯聊天系统源码 聊天APP 附APP&#xff0c;后端是基于spring boot开发的。 这是一款独立服务器部署的即时通讯解决方案&#xff0c;可以帮助你快速拥有一套自己的移动社交、 企业办公、多功能业务产品。可以 独立部署&#xff01;加密通道&#xff01;牢牢掌握通…

云备份服务端

文件使用工具和json序列化反序列化工具 //文件和json工具类的设计实现 #ifndef __UTIL__ #define __UTIL__ #include<iostream> #include<fstream> #include<string> #include <vector> #include<sys/stat.h> #include"bundle.h" #inc…

热门软件缺陷管理工具2024:专业评测与建议

国内外主流的10款软件缺陷管理工具软件对比&#xff1a;PingCode、Worktile、禅道、Tapd、Teambition、Tower、JIRA、Bugzilla、MantisBT、Trac。 在软件开发过程中&#xff0c;管理缺陷和漏洞常常成为一项挑战&#xff0c;尤其是在项目规模庞大时。选择一个高效的软件缺陷管理…