antd vue Ant Design Vue Upload图片上传组件 beforeUpload不能阻止上传行为

博客详细讨论了AntDesignVue的Upload组件中beforeUpload钩子函数无法有效阻止文件上传的问题。根据官方文档,返回false应阻止上传,但实际上需要返回一个Promise并 resolve(false) 才能实现。作者提供了示例代码,展示了如何正确阻止上传并进行文件格式和大小验证。在示例中,只有当文件格式正确且大小不超过限制时,才会允许上传并更新fileList。

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

解决antd vue upload组件 beforeUpload不能阻止上传的行为

Ant Design Vue网站给出的描述

网页地址:Upload
在这里插入图片描述

这里描述说可以直接返回false 阻止文件上传,但其实并不能阻止,经过一番尝试后
请注意查看我的示例:

const beforeUpload = async (file: UploadFile<unknown>): Promise<boolean> => {
  // 坑:必须要返回一个 Promise,promise 中 必须返回false 才能阻止上传,通过校验必须返回true和 resolve 否则会阻止上传
  return new Promise((resolve) => {
    const { supportFileType, maxSize, aspectUnit } = props;
    const { size = 0, name = "" } = file || {};

    if (!isFormatValidate(name, supportFileType)) {
      message.error("请上传支持的文件格式!");
      return false;
    }

    const isSizeValidate: boolean = size <= maxSize; // 文件大小判断
    if (!isSizeValidate) {
      const msg = `文件最大不超过${getSizeByByte(maxSize, aspectUnit)}`;
      message.error(msg);
      console.log("msg", msg);
      return false;
    }
    fileList.value = [...fileList.value, file];
    resolve(true);
    return true;
  });
};
使用VueAnt Design实现base64图片上传功能,可以按照以下步骤进行: 1. **安装VueAnt Design**: 首先,确保你已经安装了Vue CLI。如果没有安装,可以使用以下命令进行安装: ```bash npm install -g @vue/cli ``` 然后,创建一个新的Vue项目: ```bash vue create my-project cd my-project ``` 安装Ant Design Vue: ```bash npm install ant-design-vue --save ``` 2. **配置Ant Design Vue**: 在`main.js`中引入Ant Design Vue: ```javascript import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd); new Vue({ render: h => h(App), }).$mount('#app'); ``` 3. **创建上传组件**: 在`src/components`目录下创建一个新的组件文件`Base64ImageUploader.vue`: ```vue <template> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :before-upload="beforeUpload" @change="handleChange" > <img v-if="imageUrl" :src="imageUrl" alt="avatar" /> <div v-else> <a-icon :type="loading ? 'loading' : 'plus'" /> <div class="ant-upload-text">Upload</div> </div> </a-upload> </template> <script> export default { data() { return { imageUrl: '', loading: false, }; }, methods: { beforeUpload(file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { this.imageUrl = reader.result; }; return false; }, handleChange(info) { if (info.file.status === 'uploading') { this.loading = true; return; } if (info.file.status === 'done') { this.loading = false; } }, }, }; </script> <style> .avatar-uploader > .ant-upload { width: 128px; height: 128px; } .ant-upload img { width: 100%; height: 100%; object-fit: cover; } </style> ``` 4. **使用上传组件**: 在需要使用上传功能的组件中引入并使用`Base64ImageUploader`组件: ```vue <template> <div> <h1>Base64 Image Uploader</h1> <Base64ImageUploader /> </div> </template> <script> import Base64ImageUploader from '@/components/Base64ImageUploader.vue'; export default { components: { Base64ImageUploader, }, }; </script> ``` 通过以上步骤,你就可以使用VueAnt Design实现一个简单的base64图片上传功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值