Bagaimana untuk memuat naik tatasusunan fail menggunakan formData

Question

Oleh kerana mengklik input type=‘file’ sekali lagi akan menimpa senarai fail sebelumnya, jadi saya mula-mula menukar fail yang dipilih kepada base64 sebagai imej pratonton, sama seperti ini, anda boleh menambahnya beberapa kali

Tetapi bagaimana saya boleh menambah berbilang imej pratonton pada objek formdata semasa memuat naik Parameter yang diterima oleh latar belakang ialah tatasusunan fail MultipartFile[].

Inilah kesilapan saya:

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

Anda boleh mempunyai kaedah berikut:

$.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);
});

Anda sepatutnya boleh menerima fail di latar belakang. Kaedah khusus untuk digunakan bergantung pada bahasa dan rangka kerja yang digunakan dalam bahagian belakang anda.

Setakat PHP, saya suka yang terakhir, yang boleh menggunakan $_FILES untuk mendapatkan semua fail/imej dalam satu traversal.

Answer 2

Setiap kali anda memindahkan fail daripada base64, anda juga perlu membuat gumpalan dan menambahkannya pada struktur formData anda.

Selain itu, saya ingat bahawa input boleh menyokong berbilang pilihan, bukan?

Answer 3

Anda dahuluF12在networksemak untuk melihat sama ada terdapat sebarang parameter dalam permintaan ini