摘要：本文在這里要講的是批量上傳多張圖片時(shí)，如果不分批上傳可能觸發(fā)瀏覽器的并發(fā)限制，亦或是圖片過(guò)多過(guò)大導(dǎo)致上傳超時(shí)，都會(huì)影響圖片的上傳成功率。所以，我們需要分批上傳圖片時(shí)，概念就能很好的解決我們的問(wèn)題。

es7提出的async/await概念已經(jīng)存在有相當(dāng)長(zhǎng)一段時(shí)間，具體概念用法就不在這里贅述了，優(yōu)勢(shì)在于處理解決then鏈多層嵌套回調(diào)的問(wèn)題，使得代碼更為簡(jiǎn)單清晰。

本文在這里要講的是批量上傳多張圖片時(shí)，如果不分批上傳可能觸發(fā)瀏覽器的并發(fā)限制，亦或是圖片過(guò)多過(guò)大導(dǎo)致上傳超時(shí)，都會(huì)影響圖片的上傳成功率。所以，我們需要分批上傳圖片時(shí)，async/await概念就能很好的解決我們的問(wèn)題。否則，就只能使用遞歸來(lái)處理，或是只允許單張上傳影響用戶體驗(yàn)。

其實(shí)全部代碼和react沒(méi)有太大關(guān)系，只是用到部分特性，是可以適用于任何框架的。至于批量獲取圖片的組件我直接用的是react-dropzone，可以拖拽圖片，當(dāng)然了，使用原生的
也是完全OK的。

預(yù)覽代碼

//處理獲取的圖片
handleDropFiles = (acceptedFiles) => {
    const { 
        maxCount, //最多上傳圖片張數(shù)
        limit
    } = this.props;
    let { selectedFilesTotalSize, selectedFiles } = this.state;
    const _selectedFiles_ = selectedFiles.map(item => item.file); //已經(jīng)成功獲取過(guò)的圖片
    
    const successFiles = [], //獲取成功的圖片
        rejectedFiles = [], //獲取失敗的圖片
        existFiles = []; //已經(jīng)存在的圖片
    if (acceptedFiles && acceptedFiles.length) {
        for (const file of acceptedFiles) {
            if (limit * 1024 < file.size) {
                rejectedFiles.push(file);
            } else {
                const index = _selectedFiles_.findIndex(acceptedFile => this.isSameFile(file, acceptedFile)); //通過(guò)文件名文件大小判斷是否是同一文件
                if (index >= 0) {
                    existFiles.push(file);
                } else {
                    successFiles.push(file);
                }
            }
        }
    }
    
    // 若有不符合條件的圖片輸出錯(cuò)誤信息
    let toastMessage = "";
    if (existFiles.length) {
        const existFilesName = existFiles.map(item => `"${item.name}"`);
        toastMessage = `${existFilesName.join(", ")}等文件已存在;
`;
    }
    
    if (rejectedFiles.length) {
        const rejectedFilesName = rejectedFiles.map(item => `"${item.name}"`);
        toastMessage = `${toastMessage}${rejectedFilesName.join(", ")}等文件不符合上傳條件;
`;
    }
    
    const incrementLength = successFiles.length;
    const selectedFilesLength = selectedFiles.length;
    if (incrementLength + selectedFilesLength > maxCount) {
        const overflowFiles = successFiles.splice(maxCount - selectedFilesLength);
        const overflowFilesName = overflowFiles.map(item => `"${item.name}"`);
        toastMessage = `${toastMessage}${overflowFilesName.join(", ")}等文件超出上傳數(shù)量的限制;
`;
    }
    
    toastMessage && this.props.onError( toastMessage );
    
    // 多圖預(yù)覽 如果只需要用云服務(wù)上傳后的url預(yù)覽可以將此步驟替換為handleUploadFiles的代碼
    if (incrementLength) {
        // 這里選擇了createObjectURL而不是readAsDataURL具體區(qū)別不詳說(shuō)了 如果要用readAsDataURL還得Promise.all一下
        for (const file of successFiles) {
            const dataUrl = URL.createObjectURL(file);
            selectedFiles.push({
                file,
                name: file.name,
                size: file.size,
                dataUrl,
                uploadStatus: "beforeUpload" //標(biāo)識(shí)圖片狀態(tài)，之后有可能上傳失敗需要重新上傳
            });
        }
            
        selectedFiles = selectedFiles.map((item, index) => return {...item, {index: index}});
        selectedFilesTotalSize = selectedFiles.reduce((previousSize, nextFile) => previousSize + nextFile.size, 0);
        this.setState({ 
            selectedFiles,
            selectedFilesTotalSize 
        });
    }
}

批量上傳代碼

// 批量上傳獲取的圖片
handleUploadFiles = async () => {
    const { 
        batchCount, //一組最多上傳圖片張數(shù)（考慮到瀏覽器并發(fā)）
        batchLimit //最多上傳一組圖片大?。紤]到瀏覽器上傳速度限制）
    } = this.props;
    const { selectedFiles, uploadedFiles } = this.state;
    const chunkFiles = chunkFile(selectedFiles.map(file => ["beforeUpload", "failed"].includes(file.uploadStatus))); //根據(jù)batchCount&batchLimit給未上傳或上傳失敗的圖片組分塊
    const rate = chunkFiles.length;

    for (const [index, chunkFile] of chunkFiles.entries()) {
        toast.show(`圖片上傳中${~~(index+1)/rate*100}%`, "loading", this.timeout); //這里做了個(gè)假的圖片已上傳率
        const uploadFilePromise = chunkFile.map(this.uploadFile);
        await Promise.all(uploadFilePromise).then((uploadFiles) => {
            for (const file of uploadFiles) {
                if ("error" in item) {
                    selectedFiles.find(item => item.index === file.index).uploadStatus = "failed"; //若上傳失敗更改selectedFiles里的圖片狀態(tài)
                } else {
                    uploadedFiles.push({ url: file.url });
                }
            }
        });
        this.setState({ selectedFiles, uploadedFiles });
        this.props.onSuccess(uploadedFiles);
    }
    toast.hide();
    
    // 分組上傳
    function chunkFile(files) {
        let array = [],
            subArray = [],
            size = 0;

        files.forEach((item, index) => {
            size += item.size;

            if (size > batchLimit*1024 || subArray.length === batchCount) {
                array.push(subArray);
                subArray = [item];
                size = item.size;
            } else {
                subArray.push(item);
            }

            if (index === files.length-1) {
                array.push(subArray);
            }
        });
        return array;
    }
}

上傳圖片

// ajax上傳單張圖片，就是簡(jiǎn)單的FormData隨便看下就好
uploadFile = (file, index) => {
    return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append("file", file);

        $.ajax(..., (data)=>{
            data = (data && data.data) || {};
            resolve({ url: data.url, index });
        }, (err) => {
            //this.props.onError(err && err.errMsg || "上傳失敗"); //可以在這根據(jù)需求提示第幾張圖片上傳失敗
            resolve({ error: err, index })
        }, this);
    });
}