本文主要是介绍vue3文件上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
样式：
可随意，通过获取组件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>这篇关于vue3文件上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
