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