在ajax请求中使用JSON数据发送文件

时间:2017-02-26 20:09:27

标签: javascript jquery ajax asp.net-mvc

我希望将图像文件传递给ASP.NET MVC控制器,但HttpPostedFileBase为空,我在image: image之外输入JSON.stringify({})但不起作用。 另外,我更改contentType并看到此question并使用它回答,但我的问题没有解决。

Ajax代码:

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

            })
       })

控制器

public virtual async Task<ActionResult> CreatePrfile(CreateFreelancerProfileViewModel viewModel, bool isFirst, HttpPostedFileBase image)
{
    // more code
}

2 个答案:

答案 0 :(得分:2)

您不会将FormData实例放在对象中并对其进行字符串化。您可以这样做:将您的文件和其他数据放在FormData实例中。

正如您所链接的答案所说,将contentTypeprocessData选项更改为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
});

您的数据将位于相应的字段中:fileisFirstExternalProjects

答案 1 :(得分:0)

我为自己发现的最好的笏:

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)
{
    ....
}