样式:
可随意,通过获取组件toWake()方法即可
实现功能:
限制上传文件类型
限制上传文件大小
组件名称:
autoUpload
实现代码:
<!-- 通用文件上传按钮,解决原生样式无法修改问题 -->
<!-- 参数介绍(可拓展) -->
<!-- accept:可选择的文件类型(用于input) -->
<!-- limitSize:可上传文件大小(单位kb) -->
<!-- acceptList:限制文件的类型数组(用于文件校验) -->
<!-- 配置方式 -->
<!-- <autoUpload ref='iconUpload' @returnFile="returnFile" sendType="icon"
accept="image/jpg,image/jpeg,image/png" :limitSize='2*1024' :acceptList="['jpg','jpeg','png']">
</autoUpload> -->
<!-- 唤起方式 -->
<!-- iconUpload.value.toWake() -->
<!-- 接收方式 -->
<!-- returnFile() -->
<template>
<input type="file" ref="uploadfile" name="uploadfile" :accept="accept" style="display:none;"
@change="handleConfigFileSelect">
</template>
<script setup>
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
defineExpose({
toWake
})
const props = defineProps({
accept: {
type: String,
default: '*'
},
// 单位(kb)
limitSize:{
type:Number,
default:1024
},
acceptList:{
type:Array,
default:[]
},
// 回调时的判断标识
sendType:{
type:String,
default:'file'
}
})
const uploadfile = ref(null)
function toWake(){
uploadfile.value.click()
}
const emits = defineEmits(['returnFile'])
function handleConfigFileSelect(e) {
let file = e.target.files[0];
if (!file) {
return
}
let isLimit = file.size / 1024 < props.limitSize;
if (!isLimit) {
ElMessage.warning('上传文件不能超过'+props.limitSize+'kb')
return
}
let fileType = file.name.split('.')[file.name.split('.').length - 1]
let isRational = props.acceptList.findIndex(item=>{
return item==fileType
})
if (isRational==-1) {
ElMessage.warning('上传文件格式不正确')
return
}
emits('returnFile',file,props.sendType)
}
</script>