Skip to content
  • 起因是我需要实现一个上传的校验功能:单次操作最多上传10个文件,每个文件大小不超过100M
  • 业务背景是:选文件,自动上传,我调一个上传的接口服务,把上传的文件传到一个文件服务器,然后通知我这里的后端,去文件服务器取相应的文件
  • 前端背景是:文件服务有相应的SDK,已经整合element ui的上传组件,封装了一个新的前端组件,选多个文件,一个一个上传(这个组件不是我封装的,而且已经大批量使用了,虽然我觉得封装的不对)

使用闭包可以使这个需求的功能实现高内聚

javascript

handleBeforeUpload(file) {
    return new Promise((resolve, reject) => {
        const timer = function(__this) {
            let sizeUnValid = false
            let fileCount = 0
            return function(timeFile, __resolve, __reject) {
                fileCount++
                if(timeFile.size > 100*1024*1024) sizeUnValid = true
                setTimeout(() => {
                    __this.__uploadTimer = null
                    if(sizeUnValid || fileCount) {
                        this.$message(sizeUnValid ? '有文件超过100M' : '文件超过10个' )
                        __reject()
                    } else {
                        __resolve()
                    }
                }, 300)
            }
        }
        if(!this.__uploadTimer) this.__uploadTimer = timer(this)
        this.__uploadTimer(file, resolve, reject)
    })
}