This repository has been archived by the owner. It is now read-only.

[bug] The error event only invoked once #1999

Open
sukonzer opened this Issue Apr 25, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@sukonzer
Copy link

sukonzer commented Apr 25, 2018

Type of issue

  • Bug report

Uploader type

  • Traditional

Note: Support requests cannot be accepted due to lack of time.

Bug Report

Fine Uploader version

{5.16.2}

Browsers where the bug is reproducible

{chrome 66.0.3359.117}

Operating systems where the bug is reproducible

{windows 10 x64}

Exact steps required to reproduce the issue

For example:

  1. Click "select file" button.
  2. Drag a "xxx.txt" into dropzone area then validation failure .
  3. Repeat the above operation.

All relevant Fine Uploader-related code that you have written

<template>
    <div class="parse__wrap">
        <div class="parse__upload">
            <dropzone class="parse__dropzone"
                multiple
                drop-active-class-name="parse__dropzone--active"
                :uploader="uploader"
            >
                <ul class="upload-list clearfix">
                    <li v-for="(id, index) of submittedFiles" :key="id" :index="index + 1">
                        <div :class="['meta', showSuffix(id)]">
                            <p class="filename">
                                <customize-tooltip
                                    placement="top"
                                    :content="uploaderMetnods.getName(id)"
                                >
                                {{uploaderMetnods.getName(id)}}
                                </customize-tooltip>
                            </p>
                            <p class="size">{{showSize(id)}}</p>
                        </div>
                        <i class="delete iconfont icon-shibai" @click.stop="handleDelete(id)"></i>
                    </li>
                </ul>
                <div class="upload-input-box">
                    <file-input
                        multiple
                        :uploader="uploader"
                    >
                        <p class="dz-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </p>
                        <p class="dz-text">拖拽文件到这里,或者
                            <el-button type="primary">选择文件</el-button></p>
                    </file-input>
                </div>
            </dropzone>
        </div>
        <div class="parse__upload--btn">
            <el-button
                type="primary"
                @click="handleUpload"
                :disabled="submittedFiles.length < 1"
            >上传</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
import FineUploaderTraditional from 'fine-uploader-wrappers'
import Dropzone from 'vue-fineuploader/dropzone'
import FileInput from 'vue-fineuploader/file-input'

const PARSE_DOCUMENT_UPLOAD_API = '/xxx/upload' // for example

export default {
    name: 'DocumentParseUpload',
    data() {
        const uploader = new FineUploaderTraditional({
            options: {
                autoUpload: false,
                debug: true,
                validation: {
                    allowedExtensions: ['png', 'gif', 'jpg'],
                    itemLimit: 100,
                    sizeLimit: 104857600,
                },
                messages: {
                    emptyError: '{file} 大小不能为空',
                    typeError: '{file} 格式不支持,支持的格式参照温馨提示',
                    sizeError: '{file} 大小超出限制,每次上传文件总大小不能大于100M',
                },
            },
        })
        return {
            submittedFiles: [],
            uploader,
            uploaderMetnods: uploader.methods,
        }
    },
    methods: {
        showSuffix(id) {
            const nameArray = this.uploaderMetnods.getName(id).split('.')
            return nameArray[nameArray.length - 1]
        },
        showSize(id) {
            const size = this.uploaderMetnods.getSize(id)
            return size ? `${(size / 1024).toFixed(2)}KB` : ''
        },
        clearStored() {
            this.uploaderMetnods.clearStoredFiles()
            this.submittedFiles = []
        },
        handleUpload() {
            this.upload()
                .then(({ status, data: { error_msg: errorMsg } }) => {
                    this.clearStored()
                    if (status === 200) {
                        this.$router.push({ path: '/parse/loop' })
                    } else {
                        this.$message({
                            type: 'error',
                            message: errorMsg,
                        })
                    }
                })
        },
        upload() {
            const formData = new FormData()
            this.submittedFiles.forEach((id) => {
                formData.append('file', this.uploaderMetnods.getFile(id))
            })
            const rt = axios.post(PARSE_DOCUMENT_UPLOAD_API, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
            return rt
        },
        handleDelete(id) {
            this.uploaderMetnods.cancel(id)
            const idx = _.findIndex(this.submittedFiles, key => key === id)
            this.submittedFiles.splice(idx, 1)
        },
    },
    mounted() {
        this.uploader.on('submitted', (id) => {
            this.submittedFiles.push(id)
        })
        this.uploader.on('error', (id, name, errorReason) => {
            if (_.isEmpty(name)) return
            this.$message.error(errorReason)
        })
    },
    components: {
        Dropzone,
        FileInput,
    },
}
</script>

Detailed explanation of the problem

  1. Do not support batch request about oncePost options.
  2. The error event only invoked once when multi time selected the same format file of validation failure.
@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Apr 26, 2018

Thanks for the report. I don't have time to fix this right now, or even look into it. But I'd love to see a PR, if you have the time.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.