样式：

        可随意，通过获取组件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>