使用el-upload上传文件时，对文件名进行校验

概要

通常在日常项目开发过程中,会用到文件上传的功能，此时，会要求什么样的文件名可以上传什么样的不能上传，虽然说后端也可以做校验，如果在多文件上传的时候，会出现客户多次上传的文件因为一个文件名称的不规范导致所有的文件都无法上传，因此在上传的时候，需要对上传文件的文件名进行校验并提示。

例如：

使用before-upload钩子函数

注意：如果要使用upload钩子函数时，需要查看项目中有没要用到:auto-upload这个属性，如果有，此时使用before-upload是不会生效的，需要在on-change事件中看到上传的文件，建议在before-upload对文件进行校验。

实现逻辑

//  以下代码是上传文件前对文件名称的校验。
const beforeFileUpload = async (rawFile) => {
		const fileName = rawFile.name;
		const regex = /^\[(.+)\](.+)-(.+)\s+(.+)/; 
	// 这里的正则可以根据自己项目中的对文件命名的规范来给
	if(!regex.test(fileName)) {
		if(!errorMessageDiaplayed.value) {
			global.$message.error('错误提示')
		}
		return false			                   
	}
	return true
}

调用函数关联正则

提示：这里是关键性代码的细节

const FileChange: UploadProps['onChange'] = async (uploadFile: any) => {
	errorMessageDisplayed.value = false;
	const isValidFile = await beforeFileUpload(uploadFile.raw)
	if(isValidFile) {
		fileList.value.push(uploadFile.raw)
		fileList.value = fileList.value && fileList.value.map((item : any) => {
	if(item.raw) {
		return item.raw
	} else {
		return item
})
emit('fileUp',fileList.value)
}

小结

提示：需要注意的就是文件在改变的时候需要等异步文件处理的函数执行完在进行

例如：

以上就是对上传文件的文件名校验规范的代码，欢迎借鉴。