반응형
데이터와 파일을 포함한 JSON을 Web API에 게시합니다(jQuery / MVC).
ONE 요청으로 JSON을 포함한 API 컨트롤러에 게시해야 합니다.
데이터와 파일(이미지 업로드)의 전달에 문제가 있다.내 재산은 빈털터리가 되어 있다.
블로그를 많이 찾아봤는데 이미지 데이터가 전달되지 않는 것 같아요.
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
}
j쿼리
// 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);
}
});
내가 본 블로그:
- MVC에서 Web API로의 추가 폼데이터를 포함한 파일 업로드
- http://www.asp.net/web-api/overview/advanced/sending-html-form-data,-part-1
- http://www.asp.net/web-api/overview/advanced/sending-html-form-data,-part-2
- 웹 API 컨트롤러에 여러 파일이 있는 사용자 정의 양식 데이터
제가 그...FormData
그리고.$('#form1').serialize()
어프로치,provider.FileData
그리고.provider.FormData
항상 비어있었어요.제거했습니다.model
메서드의 param과 브레이크포인트를 눌렀습니다.
[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)
{
}
}
해결책:
@Musa의 답변에서 벗어나 API 컨트롤러 코드를 소개합니다.Name Value Collection을 모델에 매핑했습니다.
[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)
{
}
}
JSON은 텍스트 형식이기 때문에 JSON을 사용하여 파일(임의 이진 데이터)을 업로드할 수 없습니다.멀티파트 폼 데이터를 사용해야 합니다.
// 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);
}
});
언급URL : https://stackoverflow.com/questions/30490313/post-json-with-data-and-file-to-web-api-jquery-mvc
반응형
'programing' 카테고리의 다른 글
함수의 반환 유형 가져오기 (0) | 2023.03.25 |
---|---|
Heroku가 HTTP 응답을 잘랐습니까? (0) | 2023.03.25 |
React.js의 div와 함께 onClick을 사용하는 방법 (0) | 2023.03.20 |
투고 ID에서 카테고리 이름 가져오기 (0) | 2023.03.20 |
wordpress 목록 사용자 역할 (0) | 2023.03.20 |