我能否在JavaScript中将数组附加到“formdata”中?

60

我正在使用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();
            }
        });

3
为什么要向数组添加属性?使用对象代替。 - Musa
1
我怀疑这是PHP背景。在Javascript中,数组并不像这样工作。 - kapa
就是这样 :) 我会使用一个对象。 - Don P
13个回答

1

当我发送文件+文本+数组时,这对我有效:

const uploadData = new FormData();
if (isArray(value)) {
  const k = `${key}[]`;
  uploadData.append(k, value);
} else {
  uploadData.append(key, value);
}


const headers = {
  'Content-Type': 'multipart/form-data',
};

0
在前端使用 JSON.stringify 如下所示:
...
...
const entityData = new FormData();
entityData.append("Entities Open", JSON.stringify(login_entities));
axios
.post("/oneview/load_entity", entityData)
.then(response => {
   var entity_group = response.data.entity_group;
   var entity_code = response.data.entity_code;
   var entity_name = response.data.entity_name;
})
.catch(error => {
   console.log(error);
   alert(error);
});

在后端使用以下代码:json.loads()
...
...
login_entities = json.loads(request.POST.get('Entities Open'))
for i in login_entities:
   ...
   ...

0

我正在使用Vue.js中的formData发送文件(数组)
对我来说,以下代码有效

        if(this.requiredDocumentForUploads.length > 0) {
            this.requiredDocumentForUploads.forEach(file => {
                var name = file.attachment_type  // attachment_type is using for naming
                if(document.querySelector("[name=" + name + "]").files.length > 0) {
                    formData.append("requiredDocumentForUploadsNew[" + name + "]", document.querySelector("[name=" + name + "]").files[0])
                }
            })
        }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接