Upload 上传多张图片，beforeUpload 中有判断不合法，文件上传 onChange 不触发

[jokemmy]

本地环境

• antd 版本: 1.6.5
• 操作系统及其版本：win10
• 浏览器及其版本: chrome

你做了什么？

使用Upload.Dragger 上传多张图片， 选中了 jpg png gif 图片各一张，beforeUpload 中判断图片如果后缀是 jpg png 返回 true，gif 图片返回 false。

你期待的结果是：

以下两种情况可以接受：

1. 触发 onChange，使得 jpg png 图片在我的程序中进入正常的上传流程，gif 图片排除。
2. 不触发 onChange，不上传图片。

实际上的结果：

实际情况 onChange 并没有触发，但是 jpg png 却上传成功，上传了却没有任何反馈。

可重现的在线演示

无

代码

// 这是我项目的部分代码
import { Upload } from  and;
const Dragger = Upload. Dragger;

let i = 0;

// 进度节流函数
function nextUploadUpdateTime ( percent, toZero ) {

  if ( toZero ) {
    i = 0;
  }

  const canPass = percent > i * 10;
  if ( canPass ) {
    i ++;
  }
  return canPass;
}


function PictureUploader ( props ) {

  const options = {
    name: 'file',
    multiple: true,
    showUploadList: false,
    accept: 'image/jpeg,image/png,image/bmp',
    action: '/upload.do',

    // 发送前检验文件
    beforeUpload ( file ) {

      // 检查图片类型
      const

        // 只能上传三种图片格式
        isJPG = file.type === 'image/jpeg',
        isPNG = file.type === 'image/png',
        isBMP = file.type === 'image/bmp',
        isPic = isJPG || isPNG || isBMP,

        // 只能上传小于5m的文件
        isSmall = file.size < 1024 * 1024 * 5,

        // 最后结果
        isPass = isPic && isSmall;

      if ( !isPic ) {
        message.error( '只能上传 JPG/PNG/BMP 文件哦！', 4 );
      }
      else if ( !isSmall ) {
        message.error( '只能上传小于5M的文件哦！', 4 );
      }

      return isPass;
    },

    // 发生变化回调
    // onStart 在我的列表里创建进度条占位
    // onProgress 列表进度条更新进度
    // onLoaded 完成上传设置100%进度播放离场条动画
    onChange = ( { event, file, fileList } ) => {

      // 上传开始
      if ( Array.isArray( file ) ) {
        props.onStart( file );
      }

      // 上传过程
      else if ( event && file.status === 'uploading' ) {
        if ( nextUploadUpdateTime( file.percent ) ) {
          props.onProgress( file );
        }
      }

      // 上传结束
      else if ( file.status === 'done' ) {

        nextUploadUpdateTime( null, true );

        const json = file.response;

        if ( !file.error ) {

          if ( !json.result ) {
            props.failNotify()( json );
          }

        }
        else {
          props.catchNotify()( null, null, file.error );
        }

        // 因为节流函数在100%时不会返回 true, 设置100%
        props.onProgress( file );

        // 上传完成进度条, 动画停顿
        setTimeout( () => {
          props.onLoaded( file, json.result ? json.data : null );
        }, 1000 );
      }
    }
  };

  return (
    <div style={{ height: 140 }}>
      <Dragger options={options}>
        <p className="ant-upload-drag-icon">
          <Icon type="inbox" />
        </p>
        <p className="ant-upload-text">点击或将图片拖拽到此区域上传</p>
        <p className="ant-upload-hint">支持单个或批量图片上传，支持上传JPG/PNG/BMP文件</p>
      </Dragger>
    </div>
  );
}

[afc163]

不给代码，只能靠猜。#2423

[jokemmy]

还有一个问题，上传组件在卸载的时候如果有文件正在上传，那么这个上传连接是不是应该要断开？

[afc163]

@ddcat1115 我看 #2690 没有针对解决楼顶的问题？

[ddcat1115]

我试了下，beforeUpload 返回 true 的可以正常触发 onChange 的，@xutou12 试试升级可以解决问题不

[ddcat1115]

如果还不能，麻烦提供下可重现的demo

http://codepen.io/anon/pen/wGOWGW?editors=001

[ddcat1115]

先关了，有进一步进展或问题再reopen

[jokemmy]

不好意思，之前我的工作重点移到其他界面去了，这个bug暂时就没管了，当时 beforeUpload 返回 true，返回 false 就没有触发，不知道现在的版本怎么样，事情太多暂时还没有回头研究这个bug。
今天才回头看看我提过的东西。
如果还有问题，我会继续讨论的 ^_^

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.