javascript - 如何使用formData上傳file數組

Question

因為 input type=‘file’ 再次點擊會將先前的fileList覆蓋，所以我先將選取的檔案轉換為base64作為預覽圖片，類似於這樣，可以多次新增

#但是我在上傳的時候如何將多個預覽圖片加入到 formdata 物件中，後台接受參數是一個 MultipartFile[] files 陣列。

以下是我的錯誤做法：

function getImgFiles() {
    var imgFiles = [];
    var imgs = $('img');
    $.each(imgs, function (i, item) {
        var blob = dataURItoBlob(item.src);
        imgFiles.push(new  File([blob], item.id));
    });

    return imgFiles;
}

/**
 * base64->blob
 * @param dataURI
 * @returns {Blob}
 */
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
}

var formData = new  FormData($('form').get(0));
formData.append('files', getImgFiles());

//然后使用ajax上传，但是后台没有接受到 files 参数。

Answer 1

可以有以下幾種做法：

$.each(getImgFiles(), function(i, file){
    formData.append('files', file);
});

$.each(getImgFiles(), function(i, file){
    formData.append('files[]', file);
});

$.each(getImgFiles(), function(i, file){
    formData.append('files_' + i, file);
});

都應該可以在後台接收到檔案。而具體用哪一種做法要看你後台所使用的語言和框架。

就PHP而言，我喜歡最後一種，可以用 $_FILES 一次遍歷就能獲取到所有的文件/圖片。

Answer 2

每次把檔案轉出base64的時候，順帶也出個blob，順手append到你的formData結構裡就行了。

另外我記得input可以支援多選的吧？

Answer 3

你先F12在network裡面看看這條請求裡面的參數有沒有