在ajax請求中發送帶有JSON數據的文件

Question

我想將圖像文件發送到控制器，但HttpPostedFileBase為空，我在JSON.stringify({})之外輸入image: image但沒有工作。 另外，我更改contentType並查看此問題並使用它作為答案，但我的問題未解決。

var file_data = $("#Image").prop("files")[0];   
var image = new FormData();

image.append("file", file_data);

$.ajax({
        url: '@postUrl',
        method: "POST",
        contentType: 'application/json',
        data:
            JSON.stringify({
                    image: image,
                    isFirst : true,
                    ExternalProjects: ExternalProjects,
                    // more data

            })
       })

Answer 1

您沒有將FormData實例放在對象中並對其進行字符串化。 你做相反的事情：把你的文件和其他數據放在 FormData 實例中。

正如您鏈接的答案所說，將contentType和processData選項更改為 false 以告訴 jQuery 不要處理數據本身。

var file_data = $("#Image").prop("files")[0];   
var fd = new FormData();

fd.append("file", file_data);
fd.append("isFirst", true);
fd.append("ExternalProjects", ExternalProjects);
$.ajax({
    url: '@postUrl',
    method: "POST",
    contentType: false,
    processData: false,
    data:fd
});

您的數據將位於各自的字段中： file 、 isFirst和ExternalProjects

Answer 2

我為自己發現的最好的寺院：

export const convertDataToFormDataFormat = (data, formData = null, keyPrefix = '') => {
  if (!data) {
    return null;
  }

  let currentFormData = formData || new FormData();
  if (Array.isArray(data)) {
    data.forEach((entry, i) => {
      currentFormData = convertDataToFormDataFormat(entry, currentFormData, `${keyPrefix}[${i}].`);
    });

    return currentFormData;
  }

  if (data) {
    Object.entries(data).forEach(([key, value]) => {
      const fullKey = keyPrefix + key;
      if (value === undefined || value === null) {
        currentFormData.append(fullKey, '');
      } else if (value.constructor === File) {
        currentFormData.append(fullKey, value);
      } else if (Array.isArray(value)) {
        currentFormData = convertDataToFormDataFormat(value, currentFormData, `${fullKey}`);
      } else if (value === Object(value)) {
        currentFormData = convertDataToFormDataFormat(value, currentFormData, `${fullKey}.`);
      } else {
        currentFormData.append(fullKey, value);
      }
    });
  }

  return currentFormData;
};

轉換成這樣的：

fieild.test1= 'test';
fieild.test2= 'test';
field.arr[0].testField1 = 'testField ';
field.arr[0].testField2 = 'testField ';
field.arr[1].testField = 'testField ';
field.arr[1].testField2 = 'testField ';
field.arr[2].testField = 'testField ';
field.arr[2].testField2 = 'testField ';

適用於 asp.net core 2.0：

[HttpPost]
public async Task<IActionResult> CreateExpense([FromForm] List<SomeModelWithIFormFileField> dto)
{
    ....
}