如何使用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(),&nbsp;function(i,&nbsp;file){ &nbsp;&nbsp;&nbsp;&nbsp;formData.append('files',&nbsp;file); });$.each(getImgFiles(),&nbsp;function(i,&nbsp;file){ &nbsp;&nbsp;&nbsp;&nbsp;formData.append('files[]',&nbsp;file); });$.each(getImgFiles(),&nbsp;function(i,&nbsp;file){ &nbsp;&nbsp;&nbsp;&nbsp;formData.append('files_'&nbsp;+&nbsp;i,&nbsp;file); });都应该可以在后台接收到文件。而具体用哪种做法要看你后台所使用的语言和框架。就PHP而言，我喜欢最后一种，可以用&nbsp;$_FILES&nbsp;一次遍历就能获取到所有的文件/图片。