ASP.NET WEBAPI上传图片

根据业务需要，工程上需要提供两种上传图片的功能，第一是在PC端进行图片的上传，然后同时需要api端也能共享图片信息。

目前的解决方案是在webapi中增加一个接口，专门做图片上传处理，这样这个接口返回的是上传后的图片的路径， 然后API和PC都可以调用。

话不多说，直接上代码

using System;
using System.Web.Http;
using System.Net.Http;
using System.Web.Script.Serialization;
using System.Text;
using System.Web;

namespace BlackNails.Controllers
{
public abstract class WebAPI2BaseController : ApiController
{
public HttpContext context = HttpContext.Current;

public static HttpResponseMessage toJson(Object obj)
{
String str;
if (obj is String || obj is Char)
{
str = obj.ToString();
}
else
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
str = serializer.Serialize(obj);
}
HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };
return result;
}
}
}

这里先提供这个基础的API程序

using BlackNails.Controllers;
using System;
using System.Collections;
using System.Diagnostics;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using System.Web.Http.Cors;

namespace Apps.WebApi.Controllers
{
/// <summary>
/// 上传文件
/// </summary>
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class ImageUploadController : WebAPI2BaseController
{

#region 上传文件
/// <summary>
/// 通过multipart/form-data方式上传文件
/// </summary>
/// <returns></returns>
[HttpPost]
public async Task<Hashtable> PostFile()
{
var strPath = "";
Hashtable hash = new Hashtable();
try
{
// 是否请求包含multipart/form-data。
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}

string root = HttpContext.Current.Server.MapPath("/upload/");
if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/upload/")))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/upload/"));
}

var provider = new MultipartFormDataStreamProvider(root);

StringBuilder sb = new StringBuilder();

// 阅读表格数据并返回一个异步任务.
await Request.Content.ReadAsMultipartAsync(provider);

// 如何上传文件到文件名.
foreach (var file in provider.FileData)
{
string orfilename = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"');
FileInfo fileinfo = new FileInfo(file.LocalFileName);
if (fileinfo.Length <= 0)
{
hash["status"] = -1;
hash["msg"] = "上传出错";
hash["data"] = strPath;
}
else
{
string fileExt = orfilename.Substring(orfilename.LastIndexOf('.'));
String ymd = DateTime.Now.ToString("yyyyMMdd", System.Globalization.DateTimeFormatInfo.InvariantInfo);
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo);
if (!Directory.Exists(root + ymd))
{
Directory.CreateDirectory(root + ymd);
}
fileinfo.CopyTo(Path.Combine(root, ymd + "\\" + newFileName + fileExt), true);
sb.Append("/upload/" + ymd + "/" + newFileName + fileExt);
strPath = sb.ToString();
}
fileinfo.Delete();//删除原文件
}
hash["status"] = 0;
hash["msg"] = "上传成功";
hash["data"] = strPath;
}
catch (Exception e)
{
hash["status"] = -1;
hash["msg"] = "上传出错";
hash["data"] = strPath;
}
return hash;
}
#endregion 上传文件
}
}

这里代码都写注释了。

<form class="form-horizontal form-border" id="addMemberForm">
<div class="form-group">
<label class="col-sm-3 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="姓名" name="memberName">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">头像</label>
<div class="col-sm-6">
<input type="file" class="form-control" placeholder="头像" name="photo">
<button class="btn-success" type="button" id="upload">上传</button>
</div>
</div>
<div class="col-sm-offset-8">
<span id="addMemberResult"></span>
<input type="button" class="btn btn-success btn-3d" id="addMemberBtn" onclick="indexModule.addMember();" value="添加">
</div>
</div>
</form>
<script>
$(document).ready(function() {

$("#upload").click(function() {
var url = "http://localhost:1593/api/ImageUpload/PostFile";

var formData = new FormData($("#addMemberForm")[0]);
$.ajax({
url: url,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(returndata) {
console.log(returndata);
},
error: function(returndata) {
console.log(returndata);
}
});
});
});
</script>

这里是html端调用方法的做法。