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>