今天遇到的问题:
当前用的Ant Design Vue的2.x版本,Upload组件。根据API中展示,beforeUpload返回false就能阻止上传动作,经实验得出提示的同时,文件还能继续上传。
问题代码如下:
<template>
....
<a-upload
:multiple="true"
v-model:fileList="fileList"
:customRequest="upload"
@download="handleDownload"
:showUploadList="false"
:beforeUpload="beforeUpload"
>
<a-button>
<upload-outlined></upload-outlined>
上传
</a-button>
</a-upload>
......
</template>
<script lang="ts">
import { UploadOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, getCurrentInstance } from 'vue';
interface FileItem {
id: string;
name: string;
url: string;
}
export default defineComponent({
name:"UploadFile",
components: {
UploadOutlined,
},
props:{
fileList:{type:Array<FileItem>},
maxFileSize:Number//maxFileSize以M为单位
},
setup(props,ctx) {
const fileList = ref<FileItem[]>(props.fileList);
.......
//此处省略很多代码
.......
const upload=(options)=>{
//图片上传ajax方法
}
const beforeUpload = (f, list)=>{
const isLt50M = f.size / 1024 / 1024 < props.maxFileSize
if(!isLt50M) {
this.$message.error(f.name + '文件大小超出限制,请修改后重新上传')
return false
} else {
return true
}
}
return {
upload,
fileList,
handleDownload,
deleteHandle,
beforeUpload
}
}
});
</script>
网络上其他解决方案:
beforeUpload 有个坑:
必须要返回一个 Promise,promise 中 必须返回false 才能阻止上传,通过校验必须返回true和 resolve 否则会阻止上传。
修改后的代码如下:
const beforeUpload = (f, list)=>{
return new Promise((resolve)=>{
const isLt50M = f.size / 1024 / 1024 < props.maxFileSize
if(!isLt50M) {
this.$message.error(f.name + '文件大小超出限制,请修改后重新上传')
return false
}
fileList.value = [...fileList.value, f];
resolve(true);
return true;
});
}
这种方法,最后isLt50M为true的时候,也就是正常要求能上传文件的时候,fileList中没新上传的文件显示出来。估计问题出在fileList赋值上面。
其实beforeUpload 的第二个参数list就是fileList,当提交前文件列表都在这里存放着呢,如果大于fileSize了,直接把其pop删除第一个即可。不用return Promise了。也可以return Promise 然后处理fileList.value那句赋值就行。两种方案都可以。
修改第一种的解决办法是:
const beforeUpload = (fileItem, fList)=>{
const isLt50M = fileItem.size / 1024 / 1024 < props.maxFileSize
if(!isLt50M) {
proxy.$message.error(fileItem.name + '文件大小超出限制'+props.maxFileSize+'M,请重新上传')
fList.pop();//其实fList就是fileList,需要的是这步操作,而不是new Promise
return false
} else {
return true
}
}