[英]Post JSON with data AND file to Web Api - jQuery / MVC
I need to post to an Api Controller w/ JSON (preferably) with ONE request. 我需要用一个请求发送到带有JSON(最好)的Api控制器。
The issue is passing data AND a file (image uploaded). 问题是传递数据和文件(图像上传)。 My property is coming up empty (null).
我的财产空了(null)。
I've looked at quite a bit of blogs but can't seem to get the image's data passed. 我看了很多博客,但似乎无法通过图像传递数据。
public class SomeModel
{
public string Name { get; set; }
public string Email { get; set; }
public string City { get; set; }
public HttpPostedFileBase Image { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string CountryCode { get; set; }
}
[HttpPost]
public void CreateContestEntry(SomeModel model)
{
// model.Image is always null
// .. get image here - the other properties no issues
}
jQuery jQuery的
// create model for controller
var model = {
Name: $.trim($contestForm.find('[name="nombre"]').val()) + ' ' + $.trim($contestForm.find('[name="apellido"]').val()),
Email: $.trim($contestForm.find('[name="email"]').val().toLowerCase()),
City: $.trim($contestForm.find('[name="cuidad"]').val()),
Title: $.trim($contestForm.find('[name="title"]').val()),
Description: $.trim($contestForm.find('[name="description"]').val()),
CountryCode: 'co',
Image: $contestForm.find('[name="file-es"]')[0].files[0] // this has the file for sure
};
$.ajax({
url: '/Umbraco/api/ControllerName/CreateContestEntry',
type: 'POST',
dataType: 'json',
data: JSON.stringify(model),
//data: $('#test-form').serialize(), // tried this and using FormData()
processData: false,
async: false,
contentType: 'application/json; charset=utf-8',
complete: function (data) {
},
error: function (response) {
console.log(response.responseText);
}
});
Blogs I've looked at: 我看过的博客:
When I tried the FormData
and $('#form1').serialize()
approach, my provider.FileData
and provider.FormData
were always empty as well. 当我尝试
FormData
和$('#form1').serialize()
方法时,我的provider.FileData
和provider.FormData
也总是空的。 I removed the model
param from the method and the breakpoints were hitting when I switched it up. 我从方法中删除了
model
参数,当我打开它时断点正在击中。
[HttpPost]
public void CreateContestEntry()
{
string root = HttpContext.Current.Server.MapPath("~/App_Data");
var provider = new MultipartFormDataStreamProvider(root);
try
{
// Read the form data.
Request.Content.ReadAsMultipartAsync(provider);
// This illustrates how to get the file names.
foreach (MultipartFileData file in provider.FileData)
{
// empty
}
foreach (var key in provider.FormData.AllKeys)
{
foreach (var val in provider.FormData.GetValues(key))
{
// empty
}
}
//return Request.CreateResponse(HttpStatusCode.OK);
}
catch(Exception ex)
{
}
}
SOLUTION: 解:
Going off of @Musa's answer, here's the Api Controller code. 关于@Musa的回答,这是Api控制器代码。 I mapped the NameValueCollection to my model.
我将NameValueCollection映射到我的模型。
[HttpPost]
public void CreateContestEntry()
{
try
{
// get variables first
NameValueCollection nvc = HttpContext.Current.Request.Form;
var model = new WAR2015ContestModel();
// iterate through and map to strongly typed model
foreach (string kvp in nvc.AllKeys)
{
PropertyInfo pi = model.GetType().GetProperty(kvp, BindingFlags.Public | BindingFlags.Instance);
if (pi != null)
{
pi.SetValue(model, nvc[kvp], null);
}
}
model.Image = HttpContext.Current.Request.Files["Image"];
}
catch(Exception ex)
{
}
}
You can't upload a file(that is arbitrary binary data) with JSON as JSON is a text format. 您无法使用JSON上传文件(即任意二进制数据),因为JSON是文本格式。 you'll have to use multipart form data.
你将不得不使用多部分表单数据。
// create model for controller
var model = new FormData();
model.append('Name', $.trim($contestForm.find('[name="nombre"]').val()) + ' ' + $.trim($contestForm.find('[name="apellido"]').val()));
model.append('Email', $.trim($contestForm.find('[name="email"]').val().toLowerCase()));
model.append('City', $.trim($contestForm.find('[name="cuidad"]').val()));
model.append('Title', $.trim($contestForm.find('[name="title"]').val()));
model.append('Description', $.trim($contestForm.find('[name="description"]').val()));
model.append('CountryCode', 'co');
model.append('Image', $contestForm.find('[name="file-es"]')[0].files[0]); // this has the file for sure
$.ajax({
url: '/Umbraco/api/ControllerName/CreateContestEntry',
type: 'POST',
dataType: 'json',
data: model,
processData: false,
contentType: false,// not json
complete: function (data) {
var mediaId = $.parseJSON(data.responseText); //?
},
error: function (response) {
console.log(response.responseText);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.