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>
相关推荐
脑袋大大的16 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0126 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
Wy. Lsy44 分钟前
Kotlin基础学习记录
开发语言·学习·kotlin
Tanecious.1 小时前
C++--红黑树
开发语言·c++
Top`1 小时前
Java 泛型 (Generics)
java·开发语言·windows
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ2 小时前
如何使用Java WebSocket API实现客户端和服务器端的通信?
java·开发语言·websocket
Shartin2 小时前
Can201-Introduction to Networking: Application Layer应用层
服务器·开发语言·php
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
共享家95273 小时前
linux_线程概念
linux·开发语言·jvm