您的位置:首页 > 健康 > 美食 > 基于uniapp(vue3)H5附件上传组件,可限制文件大小

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

2025/1/8 18:50:44 来源:https://blog.csdn.net/m0_49083276/article/details/140125697  浏览:    关键词:基于uniapp(vue3)H5附件上传组件,可限制文件大小

代码:

<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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com