使用ant-design 上传文件组件Upload时的beforeUpload返回false,文件仍然上传的问题

在使用Upload这个组件的时候,我们会发现它其实又许多的小坑坑。
如果我们在beforeUpload中直接返回true或者是false,那么它其实也是会上传文件的,因为它也会触发onChange函数。
我这里是采用在对应的函数中返回一个promise来解决的,就像下面这样:

export function checkBeforeFileUpload(file){
  return new Promise((resolve, reject) => {
    let fileName = file.name;
    //截取文件名
    let pointPos = fileName.indexOf('.');
    fileName = fileName.substring(0, pointPos);
    //判断文件是否符合正则表达式的规则
    if (!fileNameRegular.reg.test(fileName)) {
      message.error(fileNameRegular.msg);
      return reject(false)
    }
    return resolve(true);

  });
}

这样在不满足条件的情况下,它就不会上传文件啦

  • 20
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
在Vue3.0中使用ant-design-vue上传文件,需要先安装ant-design-vue和axios模块: ```bash npm install ant-design-vue axios --save ``` 然后在需要使用上传组件的页面中,引入ant-design-vue和axios模块: ```javascript import { Upload, Button } from 'ant-design-vue'; import axios from 'axios'; ``` 然后在页面中,添加上传组件: ```html <template> <div> <upload :action="uploadUrl" :headers="headers" :showUploadList="false" :beforeUpload="beforeUpload" :onSuccess="onSuccess" :onError="onError" > <button> <a-button> <a-icon type="upload" /> Click to Upload </a-button> </button> </upload> </div> </template> ``` 其中,`uploadUrl`是上传文件的接口地址,`headers`是上传文件需要携带的请求头,`beforeUpload`是上传文件前的校验函数,`onSuccess`和`onError`分别是上传成功和上传失败的回调函数。 在页面的`script`中,需要定义这些属性的值以及`beforeUpload`、`onSuccess`、`onError`函数的实现: ```javascript export default { name: 'UploadPage', components: { Upload, Button }, data() { return { uploadUrl: '/api/upload', headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } }; }, methods: { beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { this.$message.error('You can only upload JPG/PNG file!'); return false; } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('Image must smaller than 2MB!'); return false; } return true; }, onSuccess(response, file) { this.$message.success('Upload successfully!'); }, onError(error, response, file) { this.$message.error('Upload error!'); } } }; ``` 其中,`beforeUpload`函数用来进行文件类型和大小的校验,`onSuccess`和`onError`函数用来处理上传成功和上传失败的情况。 最后,在页面的`style`中,可以添加一些样式来美化上传按钮: ```css button { margin-top: 16px; } button .ant-btn { width: 100%; } button .anticon-upload { margin-right: 8px; } ``` 这样,就可以在Vue3.0中使用ant-design-vue上传文件了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值