demo是在React组件, 原生js同理稍加修改即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<input id='fileInput' accept=".jpg, .jpeg, .png" multiple onChange={e => { this.selectFiles(e, 1) }} type='file' style={{
    width: 0,
    height: 0,
    display: 'none'
}}></input>

QUpload.ondrop = function (e) {
    e.preventDefault()
    that.selectFiles(e, 2)
}


selectFiles = (e, fromType) => {
    let that = this;
    nowIndex = 0;
    if (that.state.files.filter(item => item.status == 'normal' || item.status == 'active').length > 0) {
        notification.open({
            message: '滑呗提醒',
            description: `当前有任务正在进行,禁止再次上传`,
        });
        return false;
    }
    let files = fromType == 1 ? Object.values(e.target.files) : Object.values(e.dataTransfer.files);
    // console.log(files);
    files.map(item => {
        item.id = uuidv4()
        item.percent = 0
        item.status = 'normal' // success exception normal active
        item.msg = ''
    })
    console.log('allFiles--->', files);
    if(files.length > that.state.maxCount)
        message.warning(`最大支持${that.state.maxCount}张`)
    that.setState({
        files: files.slice(0, that.state.maxCount)
    }, () => {
        // 开始加载预览图 // --> thumbs
        that.asyncLoadThumbs()
        // 开始获取上传状态, 是否已上传 // -->files
        that.asyncGetStatus()
    })
}