如何将对象传递给包含文件对象的formdata答案

【问题标题】：How to pass object to formdata which contains file object如何将对象传递给包含文件对象的formdata
【发布时间】：2014-05-27 03:45:23
【问题描述】：

我想将以下类型的数据传递给webservice

travelData = {
    "method": "add_edit_request",
    "params": {
        "request_by": requestOf,
        "purpose_of": travelPurpose,                            
        "filename":file_data
    }
};

file_data 是$("#fileInput").prop("files")[0];

我想使用FormData传递文件。

我已经完成了以下代码来使用 formData 传递数据

var formdata = new FormData();
formdata.append("method","add_edit_travel_request");

parameters={};
parameters["request_by"]=requestOf;
parameters["purpose_of_travel"]=travelPurpose;
parameters["filename"]=file_data;
formdata.append("params",JSON.stringify(parameters));

我有以下类型的 ajax 调用

return $.ajax({
            url: url,
            method: 'POST',
            data: data,
            dataType:type,
            cache: false,
            crossDomain: true,
            contentType : false,
            processData: false,
            success: function(data) {
                console.log(data);

                var args = arguments[2];
                callback.call(this, data, args.statusText, args);
            },
            fail: function(data) {

                xhrServerObj = xhr;
                errorcallback.call(xhr, ajaxOptions, thrownError);
            }
});

并将其称为

Utils.Ajax.uploadFile(Utils.WebAPI.WebAPIServer,formdata , this.RequestCallBack, 'json', this.RequestFailureCallBack);

【问题讨论】：

为什么要调用两次变量：var formdata = {}; var formdata = new FormData(); ?
输入错误

标签： javascript php ajax multipartform-data form-data

【解决方案1】：

要将包含文件对象的对象传递给FormData，请尝试使用Object.entries()

// If this is the object you want to convert to FormData...
const item = {
    description: 'First item',
    price: 13,
    photo: File
};

const formData = new FormData();

Object.entries(item).forEach(([key, value]) => {
    formData.append(key, value);
});

// At this point, you can then pass formData to your handler method

在此处阅读有关Object.entries() 的更多信息 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

【讨论】：