在Asp.Net MVC中实现上传图片并显示

实现思路大概分为两步：

1. 通过上传接口，将图片上传到服务器，返回文件路径给客户端；

2. 点击保存上传，将文件路径保存到数据库，如果是多张图片，路径用逗号分隔。

核心上传代码：

        /// <summary>
        /// 图片上传
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        [Route("PostFile")]
        public HttpResponseMessage PostFile()
        {
            //TODO:Save file...
            if (!Request.Content.IsMimeMultipartContent("form-data"))
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            HttpResponseMessage response = null;

            HttpContext context = HttpContext.Current;
            try
            {
                HttpPostedFile file = HttpContext.Current.Request.Files["form-data"];

                if (!string.IsNullOrEmpty(context.Request["type"]))
                {
                    string type = context.Request["type"].ToString();
                    if (type == "image")
                    {
                        if (!string.IsNullOrEmpty(context.Request["size"]))
                        {
                            string sizes = context.Request["size"].ToString();

                            response = Request.CreateResponse(HttpStatusCode.Accepted, SaveBySize(file, sizes.Split(',')));
                        }
                        else
                        {
                            context.Response.Write("{ret:-1,msg:"参数错误"}");
                        }
                    }
                    else
                    {
                        response = Request.CreateResponse(HttpStatusCode.Accepted, Save(file));
                    }
                }
                else
                {
                    response = Request.CreateResponse(HttpStatusCode.Accepted, Save(file));
                }

            }
            catch (HttpResponseException ex)
            {
                //throw new HttpResponseException(HttpStatusCode.BadRequest);
                response = Request.CreateErrorResponse(HttpStatusCode.ExpectationFailed, ex.ToString());
            }
            return response;
        }

实现效果

点击选择图片

点击确定上传

图片预览

有需要的朋友可以扫描下方二维码加入QQ群，我会把源码分享在QQ群里