- 文件上传之前进行文件校验
beforeUpload(file,UpFileList)
if (this.fileList.length + UpFileList.length > 10) {
this.$message.warning('超过文件上传数量限制')
file.status = 'error'
return false
}
if (file.size > 1073741824) {
this.$message.warning('文件大小超过最大限度1G')
file.status = 'error'
return false
}
if (file.size === 0) {
this.$message.warning('所选信息中存在空文件或目录,请重新选择')
file.status = 'error'
return false
}
this.fileList.map(item=>{
if(item.name===file.name){
this.$message.warning('不允许重复上传')
file.status = 'error'
return false
}
})
const type = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase()
const arr = ['.jpg', '.png', '.jpeg']
if (arr.includes('.' + type)) {
return true
} else {
this.$message.warning(`不支持以 .${type} 扩展类型的文件或图片上传!`)
file.status = 'error'
return false
}
- 文件上传进行必填项校验
<a-form-model ref="chartsForm"
:model="drawerForm"
:rules="formValidateRules"
>
<a-form-model-item label="图表图片" prop="img" ref="imgRef">
<a-upload :action="actionUrl"
list-type="picture-card"
:file-list="fileList"
:before-upload="changeFile"
accept="image/jpeg,image/jpg,image/png"
@preview="handlePreview"
:remove="()=>fileList = []"
@change="handleChange"
:data="{ fileName: fileNames }">
</a-upload>
</a-form-model>
formValidateRules: {
img: [
{ required: true, message: '请上传图表图片', trigger: 'change' }
]
watch: {
fileList: {
handler (val) {
if (val.length) {
this.$refs.imgRef.clearValidate();
}
},
deep: true
}
},
save(){
if (from.img) {
this.formValidateRules.img = [];
this.$refs.imgRef.clearValidate();
}}