uniapp 实现上传文件的功能

上传单个文件

html 复制代码
<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不能直接使用读取到的文件列表,官方文档给出如下解释。

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

html 复制代码
<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>
相关推荐
LDM>W<9 分钟前
Electron下载失败
前端·javascript·electron
EndingCoder11 分钟前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
zhangfeng113323 分钟前
R geo 然后读取数据的时候 make.names(vnames, unique = TRUE): invalid multibyte string 9
开发语言·chrome·r语言·生物信息
Sally璐璐27 分钟前
Go组合式继承:灵活替代方案
开发语言·后端·golang
zzzsde27 分钟前
【c++】类和对象(4)
开发语言·c++
码熔burning28 分钟前
从 new 到 GC:一个Java对象的内存分配之旅
java·开发语言·jvm
晨非辰29 分钟前
#C语言——刷题攻略:牛客编程入门训练(十二):攻克 循环控制(四)、循环输出图形(一),轻松拿捏!
c语言·开发语言·经验分享·笔记·其他·学习方法·visual studio
gou1234123431 分钟前
Go语言io.Copy深度解析:高效数据复制的终极指南
开发语言·golang·php
白玉cfc43 分钟前
【OC】单例模式
开发语言·ios·单例模式·objective-c
十六点五44 分钟前
Java NIO的底层原理
java·开发语言·python