我可以在javascript中将数组附加到'formdata'吗？

Question

我正在使用FormData上传文件.我还想发送一系列其他数据.

当我发送图像时,它工作正常.当我将一些文本附加到formdata时,它工作正常.当我尝试在下面附加'tags'数组时,其他一切工作正常但没有发送数组.

FormData和附加数组的任何已知问题？

实例化formData:

formdata = new FormData();

我创建的数组.Console.log显示一切正常.

        // Get the tags
        tags = new Array();
        $('.tag-form').each(function(i){
            article = $(this).find('input[name="article"]').val();
            gender = $(this).find('input[name="gender"]').val();
            brand = $(this).find('input[name="brand"]').val();
            this_tag = new Array();
            this_tag.article = article;
            this_tag.gender = gender;
            this_tag.brand = brand;
            tags.push(this_tag);    
            console.log('This is tags array: ');
            console.log(tags);
        });
        formdata.append('tags', tags);
        console.log('This is formdata: ');
        console.log(formdata);

我是怎么发的:

        // Send to server
        $.ajax({
            url: "../../build/ajaxes/upload-photo.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
                $.fancybox.close();
            }
        });

Answer 1

这个怎么样？

formdata.append('tags', JSON.stringify(tags));

...相应地,json_decode在服务器上使用它来解析它.看,FormData.append的第二个值可以是......

Blob,File或字符串,如果两者都不是,则将值转换为字符串

我看到它的方式,你的tags数组包含对象(@Musa是对的,顺便说一下;制作this_tag一个数组,然后为它分配字符串属性没有意义;改为使用普通对象),所以原生转换(with toString())是不够的.不过,JSON'ing应该可以获得信息.

作为旁注,我将重写属性赋值块到这里:

tags.push({article: article, gender: gender, brand: brand});

Answer 2

写作

var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
    formData.append('array_php_side[]', array[i]);
}

你可以通过php接收正常的数组post/get.

Answer 3

使用"xxx[]"作为FORMDATA字段的名称(您将得到的数组-字符串化的对象-在你的情况下)

在你的循环中

$('.tag-form').each(function(i){
            article = $(this).find('input[name="article"]').val();
            gender = $(this).find('input[name="gender"]').val();
            brand = $(this).find('input[name="brand"]').val();
            this_tag = new Array();
            this_tag.article = article;
            this_tag.gender = gender;
            this_tag.brand = brand;
            //tags.push(this_tag);    
            formdata.append('tags[]', this_tag);
...

Answer 4

我们可以简单地这样做。

formData = new FormData;
words = ["apple", "ball", "cat"]
words.forEach((item) => formData.append("words[]", item))

// verify the data
console.log(formData.getAll("words[]"))
//["apple", "ball", "cat"]

在服务器端你会得到 words = ["apple", "ball", "cat"]

Answer 5

功能：

function appendArray(form_data, values, name){
    if(!values && name)
        form_data.append(name, '');
    else{
        if(typeof values == 'object'){
            for(key in values){
                if(typeof values[key] == 'object')
                    appendArray(form_data, values[key], name + '[' + key + ']');
                else
                    form_data.append(name + '[' + key + ']', values[key]);
            }
        }else
            form_data.append(name, values);
    }

    return form_data;
}

用：

var form = document.createElement('form');// or document.getElementById('my_form_id');
var formdata = new FormData(form);

appendArray(formdata, {
    sefgusyg: {
        sujyfgsujyfsg: 'srkisgfisfsgsrg',
    },
    test1: 5,
    test2: 6,
    test3: 8,
    test4: 3,
    test5: [
        'sejyfgjy',
        'isdyfgusygf',
    ],
});

Answer 6

我就是这样做的：

const data = new FormData();
data.append('id', class.id);
data.append('name', class.name);

class.people.forEach((person, index) => {
    data.append(`people[${index}].id`, person.id);
    data.append(`people[${index}].firstname`, person.firstname);
    data.append(`people[${index}].lastname`, person.lastname);

    // Append images
    person.images.forEach((image, imageIndex) =>
        data.append(`people[${index}].images`, {
            name: 'image' + imageIndex,
            type: 'image/jpeg',
            uri: image,
        })
    );
});

我在前端使用 React，在后端使用 Asp.Net。