AntDesign VUE：上傳組件自定義限制的兩種方式（Boolean、Promise）

AntD上傳組件

AntDesign VUE文檔

第一種方式

beforeUpload(file) {
    let isLt = true
    if (filesSize) {
        isLt = file.size / 1024 / 1024 <= filesSize
        if (!isLt) {
            this.$message.error('文件大小不能超過' + filesSize + 'MB!')
        }
    }

    return isLt
}

這種方式寫起來快速簡單，但是組件中會留下一個可刪除交互的上傳痕跡，並且未返回響應數據。甚至還可能圖片上傳這個階段還是完成了，組件依然發送了upload的http請求，這顯然是一個不合理的交互效果。

 

第二種方式

通過Promise實現相同效果

beforeUpload(file) {
    const _this = this
    return new Promise(function(resolve, reject) {
        if (file.size / 1024 / 1024 > filesSize) {
            _this.$message.error(`文件大小不能超過 ${filesSize} MB`)
            reject()
        } else {
            resolve()
        }
    })
}

這樣在判斷失敗時，圖片不會執行上傳的任何步驟。

閱讀我的另一篇文章，以了解上傳圖片和視頻能做到的多種限制：

AntDesign VUE：上傳組件圖片/視頻寬高、文件大小、image/video/pdf文件類型等限制（Promise、Boolean）

- END -