MVC WebApi 图片上传和显示

1 MVC中显示 内存流 中的图片。（不是图片文件）

创建一个Index用来显示

Action:

public ActionResult Index()
        {
            return View();
        }

cshtml:

@{
    ViewBag.Title = "Index";
}

<h2>Index2</h2>
<img src="GetImg?qrCode=@Model.ListNo" height="136">

重点就是  <img src="GetImg?qrCode=@Model.ListNo" height="136"> 其实他指向了一个action，专门显示图片。

public ActionResult GetImg(string qrCode)
        {
            var q = new MemoryStream();//这里是你的图片 内存流
            return File(q.ToArray(), "image/jpeg");
        }

2 WebApi 中上传文件

Action: 我的webapi访问路径是  api/common/UploadFile

/// <summary>
        /// 上传图片
        /// </summary>
        /// <returns></returns>
        public async Task<HttpResponseMessage> UploadFile()
        {
            // 检查是否是 multipart/form-data
            if (!Request.Content.IsMimeMultipartContent("form-data"))
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            HttpResponseMessage response = null;


            try
            {   //UploadImgUrl 为绝对路径
                var provider = new RenamingMultipartFormDataStreamProvider(UploadImgUrl);
                var body = await Request.Content.ReadAsMultipartAsync(provider);

                //获取改写后的文件名(会再次调用GetLocalFileName)
                //result.data = provider.GetLocalFileName(provider.FileData[0].Headers); 
                //获取改写后的文件名(不会再次调用GetLocalFileName)
                //result.data = body.FileData[0].LocalFileName.Substring(body.FileData[0].LocalFileName.LastIndexOf('\'));  

                response = Request.CreateResponse(HttpStatusCode.OK);
            }
            catch
            {
                throw new HttpResponseException(HttpStatusCode.BadRequest);
            }
            return response;
        }

         

创建一个 Provider 用于重命名接收到的文件
public class RenamingMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
    {
        public RenamingMultipartFormDataStreamProvider(string path)
            : base(path)
        { }

        public override string GetLocalFileName(HttpContentHeaders headers)
        {
            var sb = new StringBuilder((headers.ContentDisposition.FileName ?? DateTime.Now.Ticks.ToString()).Replace(""", "").Trim().Replace(" ", "_"));
            Array.ForEach(Path.GetInvalidFileNameChars(), invalidChar => sb.Replace(invalidChar, '-'));
            return sb.ToString();
        }

    }

cshtml:

<form name="form1" method="post" enctype="multipart/form-data" action="/api/common/UploadFile">
    
    <div>
        <label for="image1">Image File</label>
        <input name="image1" type="file" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

3 MVC上传图片：

前台：

@using (Html.BeginForm("Test", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input name="up1" type="file" />
    <input type="submit" value="Submit"/>
}

后台：

[ValidateInput(false)]
        [HttpPost]
        public ActionResult Test(HttpPostedFileBase up1)
        {
            
            if (up1!=null&&up1.FileName != "")
                {
                    
                    up1.SaveAs(imgFilePath);//文件保存，imgFilePath:文件路径+文件名
                    
                }
            return View();
        }

4 Ajax上传图片：

前台：

<form id="form1">
    <input type="file" id="file"  name="file"/>
    <input type="button" value="提交" onclick="sub()" />
</form>


<script>
    
    function sub() {
        var formData = new FormData();
        formData.append("file", document.getElementById("file").files[0]);

        $.ajax({
            url: "/Test/UploadFile",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                
            }
        });
    }
    
</script>

后台：

[HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file)
        {

            return RedirectToAction("Index");
        }