基于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>
相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪5 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪5 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试