ajouter un tableau à FormData et l'envoyer via AJAX

Question

J'utilise l'ajax pour soumettre un formulaire multipartite avec des tableaux, des champs de texte et des fichiers.

J'ajoute chaque VAR aux données principales comme suit

var attachments = document.getElementById('files'); 
var data= new FormData();

for (i=0; i< attachments.files.length; i++){
    data.append('file', attachments.files[i]);
    console.log(attachments.files[i]);

    data.append ('headline', headline);
    data.append ('article', article);
    data.append ('arr', arr);
    data.append ('tag', tag);

puis j'utilise la fonction ajax pour l'envoyer à un fichier PHP pour le stocker dans la base de données sql.

$.ajax({    
    type: "post",
    url: 'php/submittionform.php',
    cache: false,
    processData: false,
    contentType: false,
    data: data,
    success: function(request) {$('#box').html(request); }
})

Mais du côté de PHP, le arr qui est un tableau apparaît comme une chaîne de caractères.

Lorsque je ne l'envoie pas avec ajax en tant que données de formulaire mais que j'utilise le simple $.POST J'obtiens bien un tableau du côté de PHP, mais je ne peux pas envoyer les fichiers non plus.

des solutions ?

Answer 1

J'ai corrigé la version tapuscrit. Pour javascript, il suffit d'enlever les définitions de type.

  _getFormDataKey(key0: any, key1: any): string {
    return !key0 ? key1 : `${key0}[${key1}]`;
  }
  _convertModelToFormData(model: any, key: string, frmData?: FormData): FormData {
    let formData = frmData || new FormData();

    if (!model) return formData;

    if (model instanceof Date) {
      formData.append(key, model.toISOString());
    } else if (model instanceof Array) {
      model.forEach((element: any, i: number) => {
        this._convertModelToFormData(element, this._getFormDataKey(key, i), formData);
      });
    } else if (typeof model === 'object' && !(model instanceof File)) {
      for (let propertyName in model) {
        if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
        this._convertModelToFormData(model[propertyName], this._getFormDataKey(key, propertyName), formData);
      }
    } else {
      formData.append(key, model);
    }

    return formData;
  }

Answer 2

Code JavaScript :

var formData = new FormData();
let arr = [1,2,3,4];
formData.append('arr', arr);

Sortie sur php :

$arr = $_POST['arr']; ===>  '1,2,3,4'

Solution code php :

$arr = explode(",", $_POST['arr']); ===> [1,2,3,4]

Answer 3

Dans mon cas, j'ai obtenu

{
    "category": [
        "Incorrect type. Expected pk value, received str."
    ]
}

erreur donc

Pour qui on utilise React (frontend) et Django DRF (backend) :

const category = [1,2,3,4,5]
formData.append("category", JSON.stringify(category));

import json
from .serializers import ArticleSerializer
from rest_framework.response import Response

class ArticleListCreateView(ListCreateAPIView):
    permission_classes = (
        IsSuperuserOrReadOnly,
        IsAutherOrReadOnly,
    )
    serializer_class = ArticleSerializer
    model = Article
    queryset = Article.objects.filter(article_honor='a', status='p')

    def create(self, request, *args, **kwargs):
        data = request.data
        article = Article('set all argumenst')

        image = request.data['image']
        # save image in local

        article.save()
        categorys = json.loads(data['category'])
        for catID in categorys:
            cat = Category.objects.get(id=catID)
            article.category.add(cat)

        article.save()

        return Response(ArticleSerializer(article).data)

Answer 4

Moyen simple :

data.map(dt=>formdata.append("name",dt))

J'ai essayé, cela fonctionne parfaitement