javascript - 发送 FormData 到 ajax 时未捕获 TypeError 非法调用

Question

我正在尝试将文件发送到服务器进行一些处理。使用下面的代码可以完美地工作:

var formData = new FormData();
formData.append('file', $('#fileUpload')[0].files[0]);
options = JSON.stringify(options); // {"key": "value"}

$.ajax({
        url: "url",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {

        },
        error: function (msg) {
            showMsg("error", msg.statusText + ". Press F12 for details");
            console.log(msg);
        }
    });

但是，我想做的不仅是发送 FormData，还发送 json 对象。我正在尝试做如下的事情:

var formData = new FormData();
formData.append('file', $('#fileUpload')[0].files[0]);
options = JSON.stringify(options); // {"key": "value"}

$.ajax({
        url: "url",
        type: "POST",
        data: { "formData": formData, "options": options },
        //dataType: "json",
        //processData: false,
        //contentType: false,
        success: function (data) {

        },
        error: function (msg) {
            showMsg("error", msg.statusText + ". Press F12 for details");
            console.log(msg);
        }
    });

当我这样做时，我收到错误消息未捕获的类型错误非法调用根据我的研究，我找不到任何像这样发送表单数据的示例。这是否需要重构，是否有其他方法可以将 json 对象与表单数据一起发送？

Answer 1

将 JSON 对象 options 附加到 FormData 即可。

var formData = new FormData();
formData.append('file', $('#fileUpload')[0].files[0]);
options = JSON.stringify(options);
formData.append('options', options); //append it with the form data and take it apart on the server

$.ajax({
    url: "url",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {

    },
    error: function (msg) {
        showMsg("error", msg.statusText + ". Press F12 for details");
        console.log(msg);
    }
});