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>