So laden Sie ein Dateiarray mit formData hoch

Question

Da durch erneutes Klicken auf „input type=‘file’“ die vorherige Dateiliste überschrieben wird, konvertiere ich zunächst die ausgewählte Datei als Vorschaubild in Base64. Ähnlich wie hier können Sie sie mehrmals hinzufügen

Aber wie füge ich beim Hochladen mehrere Vorschaubilder zum Formdata-Objekt hinzu? Der vom Hintergrund akzeptierte Parameter ist ein MultipartFile[]-Dateiarray.

Das habe ich falsch gemacht:

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里面看看这条请求里面的参数有没有