Comment télécharger un tableau de fichiers à l'aide de formData

Question

Parce que cliquer à nouveau sur input type='file' écrasera la liste de fichiers précédente, je convertis donc d'abord le fichier sélectionné en base64 en tant qu'image d'aperçu, similaire à celle-ci, vous pouvez l'ajouter plusieurs fois

Mais comment ajouter plusieurs images d'aperçu à l'objet formdata lors du téléchargement ? Le paramètre accepté par l'arrière-plan est un tableau de fichiers MultipartFile[].

Voici ce que j'ai mal fait :

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

Vous pouvez avoir les méthodes suivantes :

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

Vous devriez pouvoir recevoir des fichiers en arrière-plan. La méthode spécifique à utiliser dépend du langage et du framework utilisés dans votre backend.

En ce qui concerne PHP, j'aime le dernier, qui peut utiliser $_FILES pour obtenir tous les fichiers/images en un seul parcours.

Answer 2

Chaque fois que vous transférez un fichier hors base64, vous devez également créer un blob et l'ajouter à votre structure formData.

De plus, je me souviens que la saisie peut prendre en charge plusieurs sélections, n'est-ce pas ?

Answer 3

Vous devez d'abordF12在networkvérifier s'il y a des paramètres dans cette demande