基于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>
相关推荐
机器视觉知识推荐、就业指导4 分钟前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow11 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷16 分钟前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试17 分钟前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog20 分钟前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella252122 分钟前
10前端项目----商品详情页/滚轮行为
前端
阑梦清川32 分钟前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库
程序猿--豪1 小时前
webpack详细打包配置,包含性能优化、资源处理...
前端·webpack·性能优化
乌夷1 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
小小小小宇2 小时前
前端监控 SDK
前端