Ant-design: Upload组件:beforeUpload上传前检查问题

Created on 29 Dec 2017  ·  7Comments  ·  Source: ant-design/ant-design

Version

3.0.3

Environment

win7,chrome63.0.3239.84

Reproduction link

https://codepen.io/LynnHg/pen/YYZdRV

Steps to reproduce

handleBeforeUpload(file) {
const sizeOk = file.size < 1024 * 300;
const typeOk =
file.type === 'image/jpeg' ||
file.type === 'image/png' ||
file.type === 'image/bmp' ||
file.type === 'image/gif';

if (!typeOk) {
  message.error('照片格式有误!');
} else {
  if (!sizeOk) {
    message.error('照片大小超过300K!');
  }
}

return sizeOk && typeOk;

}

What is expected?

当上传错误格式的照片,提示格式错误,但不显示任何效果

What is actually happening?

当上传错误格式的照片,提示格式错误,但界面上显示了"文件上传中"

Inactive 🐛 Bug

Most helpful comment

beforeUpload (file) {
const maxFileSize = 2;
const isLtMax = file.size / 1024 / 1024 < maxFileSize;

return new Promise((resolve, reject) => {
  if(!isLtMax) {
    reject(file);
  } else {
    resolve(file);
  }
});

};
This way will prevent the error file from adding to the fileList.

All 7 comments

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: https://github.com/ant-design/ant-design/issues/4897

这是因为onChange的回调方法有问题,不能这样写

I think it's a problem, When beforeUpload retrun false, file object in callback onChange should give a right status.

and if use Promise, reject wont trigger onChange, but return false does!

if (!typeOk) {
   message.error('照片格式有误!');
   return false
} 
if (!sizeOk) {
    message.error('照片大小超过300K!');
    return false
}
return true;

Duplicate of #8020

beforeUpload (file) {
const maxFileSize = 2;
const isLtMax = file.size / 1024 / 1024 < maxFileSize;

return new Promise((resolve, reject) => {
  if(!isLtMax) {
    reject(file);
  } else {
    resolve(file);
  }
});

};
This way will prevent the error file from adding to the fileList.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xtznhzxdev picture xtznhzxdev  ·  3Comments

PeteAndersen picture PeteAndersen  ·  3Comments

alanwei0 picture alanwei0  ·  3Comments

longhuasishen picture longhuasishen  ·  3Comments

ericdai picture ericdai  ·  3Comments