需求:一個附件列表毫痕,帶上傳功能,在上傳時要求總附件數(shù)量不超過3個
分析:在上傳時進行before驗證馆纳,在onChange函數(shù)中進行計數(shù)清零及文件處理
場景:
1邻遏,沒有文件糠亩,上傳數(shù)量《=3,可一次性傳完
2准验,沒有文件赎线,上傳數(shù)量》3,提示數(shù)量超過3個糊饱,不上傳垂寥,列表為空
3,有文件數(shù)量為1另锋,上傳數(shù)量《=2矫废,可一次性傳完
4,有文件數(shù)量為1砰蠢,上傳數(shù)量》2,提示數(shù)量超過3個唉铜,不上傳台舱,列表不變
基于以上場景,我們的思路是潭流,根據(jù)antd api的特性竞惋,當選擇好文件之后,先執(zhí)行beforeUpload鉤子灰嫉,有幾個文件調(diào)用幾次拆宛,這樣我們可以定義個全局變量beforeUploadCounter來統(tǒng)計,onChange函數(shù)是IO異步操作之后的的鉤子函數(shù)
思路是:
1讼撒,計算beforeUploadCounter次數(shù)
2浑厚,計算當前文件列表數(shù)量this.state.fileList.length
3股耽,當上傳文件個數(shù)+已有附件個數(shù) 超過3個時,設(shè)置繼續(xù)上傳變量continueUpload為false
4钳幅,在onChange鉤子函數(shù)中物蝙,判斷continueUpload 是否為false,如果為false敢艰,return false诬乞,不繼續(xù)后面的操作
5,由于beforeUploadCounter是全局函數(shù)钠导,在下一次選擇上傳的時候需要把它清零震嫉,以免影響計算。
代碼
let beforeUploadCounter = 0; // 上傳的次數(shù)牡属,可以統(tǒng)計到多少個文件
let allFilesLength = 0; //上傳文件個數(shù)+當前文件列表個數(shù)
let continueUpload = true; //是否繼續(xù)上傳
beforeUpload(file) {
continueUpload = true;
beforeUploadCounter++
allFilesLength = beforeUploadCounter + this.state.fileList.length
continueUpload = allFilesLength < 4;
if (allFilesLength === 4) {
Modal.error({
title: '上傳的文件不能超過3個票堵,請重新選擇'
});
}
if (allFilesLength >= 4) {
return false
}
},
fileChange(info) {
beforeUploadCounter = 0;
if (!continueUpload) {
return false
}
//業(yè)務(wù)邏輯。湃望。换衬。省略
this.setState({ fileList });
}