如何将 FormData 中的附加数据发送到网络 api

Question

我正在上传文件，为此我在 jquery ajax 中使用 FormData object 并将其传递给 ASP.NET MVC WEB API，它工作正常，我能够在服务器端获取文件，但我也想通过相同的请求传递一些额外的细节。

我可以在 headers 中添加额外的数据，我可以在服务器端从 headers 获取，但我也会对移动应用程序使用相同的 API。所以，如果我可以将数据作为函数的参数传递，那就太好了。

那么如何在 formData object 中传递额外的数据以及如何在服务器端获取它？

我的代码是，

function uploadEvaluationFile() {

    var files = $("#file_UploadFile1").get(0).files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (var x = 0; x < files.length; x++) {
                data.append("file1" + x, files[x]);
            }


data.append("UserId", 5);
            data.append("ArtCategory", 5);
            data.append("Title", "Title1");
            data.append("Description", "Desc 1");

            $.ajax({
                type: "POST",
                url: '/Home/saveEvaluationFile',
                contentType: false,
                processData: false,
                data: data,
                async: false,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('identifier', 111);
                    xhr.setRequestHeader('oldFileName', 222);
                },
                dataType: "json",
                success: function (result) {
                    console.log(result);
                },
                error: function (err) {
                    console.log(err);
                }
            });
        } else {
            alert("This browser doesn't support HTML5 file uploads!");
        }
    }
}

网页api代码，

[HttpPost]
        public async Task<JsonResult> saveEvaluationFile(EvaluationFileDetails FileData)
        {
            IEnumerable<string> headerValues = Request.Headers.GetValues("oldFileName");
            var oldFileName = headerValues.FirstOrDefault();
            IEnumerable<string> headerValues1 = Request.Headers.GetValues("identifier");
            var newFileName = headerValues1.FirstOrDefault();

            try
            {
                foreach (string file in Request.Files)
                {
                    HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
                }
            }
            catch (Exception)
            {
                return Json("Upload failed");
            }

            return Json("File uploaded successfully");
        }

我的class是，

public class EvaluationFileDetails
    {
        public HttpPostedFileBase file1 { get; set; }
        public int UserId { get; set; }
        public int ArtCategory { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }

    }

Answer 1

您可以使用同款

 data.append("file1" + x, files[x]);

例如：

 formdata.append('Key', 'Value');

获取数据

[HttpPost]
public async Task<JsonResult> saveEvaluationFile(FileModel model)
{
  foreach (string image in model.images)
  {
     HttpPostedFileBase hpf =  model.images[image ] as HttpPostedFileBase;
    // nesasary save part
  }

将文件添加到模型

 public class FileModel
 {
 ...
 public HttpPostedFileBase File1 { get; set; }//one file
 public IEnumerable<HttpPostedFileBase> images {get;set;}//file collection
 }

如何将 FormData 中的附加数据发送到网络 api

how to send additional data in FormData to web api

asp.net

jquery

form-data

asp.net-mvc-4

asp.net-web-api