如何使用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 一次遍历就能获取到所有的文件/图片。