antDesign中Upload组件文件上传超出大小不能阻止上传行为

时间能证明一切

已于 2023-12-22 11:51:32 修改

阅读量1.1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue3+antDesign 文章标签： vue.js 前端 javascript

于 2023-12-19 18:16:07 首次发布

本文链接：https://blog.csdn.net/LVfaith66883460/article/details/135088662

vue3+antDesign 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在AntDesignVue的2.x版本中，如何正确使用Upload组件的beforeUpload钩子函数来阻止文件上传，以及处理Promise返回值以确保文件大小限制的正确执行。同时提到了关于List参数的误解和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到的问题：

当前用的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
    }
}