基于uniapp(vue3)H5附件上传组件,可限制文件大小

代码:

javascript 复制代码
<template>
	<view class="upload-file">
		<text>最多上传5份附件,需小于50M</text>
		<view class="" @click="selectFile">
			上传
		</view>

	</view>
	<view class="list" v-if="fileListName.length">
		<view class="file-item" v-for="(item,index) in fileListName">
			<view class="_text_box">{{item}}</view>
			<view @click="delFile(index)">
				<u-icon name="close-circle" color="red"></u-icon>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		// 文件最大体积(mb)
		maxsize: {
			type: [String, Number],
			default: 50
		}
	})
	const fileList = ref([])
	const fileListName = ref([])

	function selectFile() {
		uni.chooseFile({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log("----", props.maxsize);
				console.log("----", chooseImageRes);
				if (chooseImageRes.tempFiles[0].size > (props.maxsize * 1024 * 1024)) {
					uni.showToast({
						icon: "none",
						title: "文件过大"
					})
					return
				}
				// uni.uploadFile({
				// 	url: '', 
				// 	filePath: tempFilePaths[0],
				// 	name: 'file',
				// 	formData: {
				// 		'user': 'test'
				// 	},
				// 	success: (uploadFileRes) => {

				// 	}
				// });
				fileListName.value.push(chooseImageRes.tempFiles[0].name)
			}
		});
	}

	function delFile(index) {
		fileListName.value.splice(index, 1)
	}
</script>

<style lang="scss" scoped>
	.upload-file {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 24rpx;
			font-weight: 400;
			color: #D8D8D8;
		}

		&>view {
			background: #6D76FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			width: 110rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			color: #fff;
		}
	}

	.file-item {
		width: 100%;
		display: flex;
		justify-content: space-between;

		&>view:nth-child(1) {
			max-width: 500rpx;
			text-align: left;
		}
	}
</style>
相关推荐
im_AMBER6 分钟前
React 07
前端·笔记·学习·react.js·前端框架
Giant10012 分钟前
Node.js .env 配置指南:安全管理项目秘钥与多环境适配
前端
沢田纲吉15 分钟前
《LLVM IR 学习手记(七):逻辑运算与位运算的实现与解析》
前端·c++·编译器
秋田君19 分钟前
3D热力图封装组件:Vue + Three.js 实现3D图表详解
javascript·vue.js·3d·three.js·热力图
golang学习记26 分钟前
从0死磕全栈之Next.js 重定向全指南:从基础跳转到大规模路由迁移
前端
Mapmost31 分钟前
Mapmost地图引擎丨测绘资质“合规门票”
前端
JarvanMo1 小时前
不要在 SwiftUI 中使用 .onAppear() 进行异步(Async)工作——这就是它导致你的 App 出现 Bug 的原因。
前端
Moment1 小时前
Next.js 16 新特性:如何启用 MCP 与 AI 助手协作 🤖🤖🤖
前端·javascript·node.js
吃饺子不吃馅1 小时前
Canvas高性能Table架构深度解析
前端·javascript·canvas
一枚前端小能手1 小时前
🔄 重学Vue之生命周期 - 从源码层面解析到实战应用的完整指南
前端·javascript·vue.js