如何使用网页 API 保存图片?

Question

我在AccountController中有这个方法

[HttpPut]
[Route("UserInfo")]
public async Task<IHttpActionResult> SetUserInfo(UserViewModel model)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
var user = UserManager.FindByName(User.Identity.Name);
user.UserName = model.UserName;
user.Email = model.Email;
user.FullName = model.FullName;
user.Skype = model.Skype;
user.PhoneNumber = model.PhoneNumber;
SaverPhotos.SavePhoto(model);
IdentityResult result = await UserManager.UpdateAsync(user);
if (!result.Succeeded)
{
return GetErrorResult(result);
}
return Ok();
}
public class UserViewModel
{
public string UserName { get; set; }
public string FullName { get; set; }
public string Email { get; set; }
public string Skype { get; set; }
public string PhoneNumber { get; set; }
public HttpPostedFileBase Avatar { get; set; }
}

而这个 ajax 代码在视图中：

$.ajax({
type: 'PUT',
contentType: false,
processData: false,
url: '/api/account/UserInfo',
data: data,
beforeSend: function (xhr) {
var token = window.app.model.get('tokenInfo');
xhr.setRequestHeader("Authorization", "Bearer " + token);
},
success: function (response) {
alert("Successfully saving info!");
},
error: function (response) {
alert('Error');
}
});

形式上有很多代码，但文件输入看起来：

<input type="file" name="Avatar" accept="image/png, image/jpeg, image/gif" id="profileAvatar"/>

当我尝试保存此表单时，我收到代码 415 的错误。没有 contentType 和 proccessType 与"false"错误是 500，但在调试模式下，我什至没有进入方法 SetUserInfo。用户视图模型只是空。 为什么？ 在互联网上，很多人说编写上传文件控制器来保存图像，但是我如何与用户一起设置此图像？请帮忙。

Answer 1

好的，我解决了。

[HttpPost]
[Route("UserInfo")]
public async Task<IHttpActionResult> SetUserInfo()
{
NameValueCollection form = HttpContext.Current.Request.Form;
var model = Pawmapper<UserViewModel>.Map(form, new UserViewModel());
var user = UserManager.FindByName(User.Identity.Name);
user.UserName = model.UserName;
user.Email = model.Email;
user.FullName = model.FullName;
user.Skype = model.Skype;
user.PhoneNumber = model.PhoneNumber;
if (HttpContext.Current.Request.Files.Count > 0)
{
model.Avatar = HttpContext.Current.Request.Files["Avatar"];
var photoId = Guid.NewGuid() + Path.GetExtension(model.Avatar.FileName);
user.Photo = new DataProvider.Photo
{
FileName = model.Avatar.FileName,
Path = "app/modules/main/img/users/" + photoId
};
model.Avatar.SaveAs(HttpContext.Current.Server.MapPath("~/Client/app/modules/main/img/users/" + photoId));
}
var result = await UserManager.UpdateAsync(user);
if (!result.Succeeded)
{   
return GetErrorResult(result);
}
return Ok();
}

爪子映射器

public static class Pawmapper<T>
{
public static T Map(NameValueCollection nameValueCollection, T model)
{
foreach (string keyValue in nameValueCollection.AllKeys)
{
PropertyInfo property = model.GetType().GetProperty(keyValue, BindingFlags.Public | BindingFlags.Instance);
if (property != null)
{
property.SetValue(model, nameValueCollection[keyValue], null);
}
}
return model;
}
}