.NET WebAPI 实现图片上传（包括附带参数上传图片）

博主的项目，客户端是APP，考虑到以后也可能会应用到微信端、网站等，图片上传方法就需要兼容多端，并且以目前的设计，不允许非登录用户上传图片，就得在上传时解决附带参数上传图片的问题。

先来看看后台方法（逻辑都写在了一起，有点乱，分布式文件系统还没做好，暂时存在了本地...）：

         /// <summary>

         /// 图片上传  [FromBody]string token

         /// </summary>

         /// <returns></returns>

         [HttpPost]

         [Route("api/Upload/ImgUpload")]

         public Task<Hashtable> ImgUpload()

         {

             // 检查是否是 multipart/form-data

             if (!Request.Content.IsMimeMultipartContent("form-data"))

                 throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

             // 文件保存目录路径

             const string saveTempPath = "~/UploadFiles/";

             var dirTempPath = HttpContext.Current.Server.MapPath(saveTempPath);

             // 设置上传目录

             var provider = new MultipartFormDataStreamProvider(dirTempPath);

             var task = Request.Content.ReadAsMultipartAsync(provider).

                 ContinueWith<Hashtable>(o =>

                 {

                     var hash = new Hashtable();

                     var file = provider.FileData[];

                     // 最大文件大小

                     const int maxSize = ;

                     // 定义允许上传的文件扩展名

                     const string fileTypes = "gif,jpg,jpeg,png,bmp";

                     // token验证

                     var token = string.Empty;

                     try

                     {

                         token = provider.FormData["token"].ToString();

                     }

                     catch (Exception exception)

                     {

                         throw new Exception("未附带token，非法访问!", exception);

                     }

                     if (!string.IsNullOrEmpty(token))

                     {

                         if (!CacheManager.TokenIsExist(token))

                         {

                             throw new UserLoginException("Token已失效，请重新登陆!");

                         }

                         if (accountInfoService.Exist_User_IsForzen(AccountHelper.GetUUID(token)))

                         {

                             CacheManager.RemoveToken(token);

                             tempCacheService.Delete_OneTempCaches(new Guid(token));

                             throw new UserLoginException("此用户已被冻结,请联系管理员（客服）!");

                         }

                     }

                     else

                     {

                         throw new Exception("token为空，非法访问!");

                     }

                     string orfilename = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"');

                     var fileinfo = new FileInfo(file.LocalFileName);

                     if (fileinfo.Length <= )

                     {

                         hash["Code"] = -;

                         hash["Message"] = "请选择上传文件。";

                     }

                     else if (fileinfo.Length > maxSize)

                     {

                         hash["Code"] = -;

                         hash["Message"] = "上传文件大小超过限制。";

                     }

                     else

                     {

                         var fileExt = orfilename.Substring(orfilename.LastIndexOf('.'));

                         if (String.IsNullOrEmpty(fileExt) ||

                             Array.IndexOf(fileTypes.Split(','), fileExt.Substring().ToLower()) == -)

                         {

                             hash["Code"] = -;

                             hash["Message"] = "不支持上传文件类型。";

                         }

                         else

                         {

                             try

                             {

                                 AttachmentFileResultDTO attachmentFileResult;

                                 attachmentFileService.UploadAttachmentFile(fileinfo, dirTempPath, fileExt,

                                     Path.GetFileNameWithoutExtension(file.LocalFileName), out attachmentFileResult);

                                 hash["Code"] = ;

                                 hash["Message"] = "上传成功";

                                 hash["FileId"] = attachmentFileResult.ID;

                                 hash["FileName"] = attachmentFileResult.FileName + attachmentFileResult.FileType;

                                 hash["NetImageUrl"] = attachmentFileResult.FileUrl;

                             }

                             catch (Exception exception)

                             {

                                 throw new Exception("上传失败!", exception);

                             }

                         }

                     }

                     return hash;

                 });

             return task;

         }

注：

1.第31行至57行是对附带参数token进行验证，因为博主的需求是只开放登录用户上传图片

2.第34行一定要tostring()，因为我们的参数也是以二进制数据格式上传的

前台目前是以jquery做的测试，使用了ajaxfileupload.js来上传文件。不过博主下载的ajaxfileupload.js并不支持附带参数上传，不知道是不是没找到好资源，不管了，自己打开文件瞅瞅...源码也不长一两百行，那就自己动手改改呗。(如果你已下载到支持附带参数上传的js，请自动忽略这一部分)

找到createUploadForm这个函数，OK，顾名思义它是用来创建FORM的，看看博主下载版本的源码：

   createUploadForm: function (id, fileElementId) {

         //create form

         var formId = 'jUploadForm' + id;

         var fileId = 'jUploadFile' + id;

         var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

         var oldElement = jQuery('#' + fileElementId);

         var newElement = jQuery(oldElement).clone();

         jQuery(oldElement).attr('id', fileId);

         jQuery(oldElement).before(newElement);

         jQuery(oldElement).appendTo(form);

         //set attributes

         jQuery(form).css('position', 'absolute');

         jQuery(form).css('top', '-1200px');

         jQuery(form).css('left', '-1200px');

         jQuery(form).appendTo('body');

         return form;

     },

我们添加参数data，并在第5行后面插入下列代码：

       if (data) {

             for (var i in data) {

                 if (data.hasOwnProperty(i)) {

                     jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);

                 }

             }

         }

再找到调用这个函数的地方，ajaxFileUpload函数中有这样一行：

var form = jQuery.createUploadForm(id, s.fileElementId);

OK，修改成我们重构后的调用：

var form = jQuery.createUploadForm(id, s.fileElementId,(typeof(s.data) == 'undefined' ? false : s.data));

到这一步，我们就可以jquery调用ajaxfileupload执行文件上传并且附带参数了。

    $.ajaxFileUpload({

         url: "/api/Upload/ImgUpload",

         secureuri: false,

         fileUpload: file,

         dataType: 'json',

         data: { "token": token },

         success: function (data, status) {

             var str = $(data).text();

             var result = JSON.parse(str);

             successFn(result, key);

         }, error: function (data, status, e) {

             failFn();

         }

     });

具体的ajaxfileupload.js下载路径：http://download.csdn.net/detail/cb511612371/9173749

附上做测试随意写的文件上传通用方法一份，可能有点丑...求轻喷（会有部分逻辑是博主测试的功能需求决定的，如使用，请自己过滤处理）

 //图片上传

 window.proHub = {};

 common = {};

 /**================================================================

  文件上传

  =================================================================*/

 common.uploadTemplate = '<li class="fl pr">' +

 '<div class="plus abs-mm fullLayer">' +

 '<span class="abs-mm"></span>' +

 '<span class="abs-mm"></span>' +

 '</div>' +

 '<img class="abs-mm hidden"/>' +

 '<input class="file-input" type="file" name="file{0}" accept="image/*" onchange="fileUploadChange(this);"/>' +

 '<div class="file-img-del hidden"></div>' +

 '</li>';

 // 文件上传

 common.fileIndex = ;

 // 添加文件上传框

 common.appendFileUpload = function ($container, imgData, key) {

     var h = "hidden";

     var $list = $container.find("li");

     var t = $container.attr("limit");//

     var len = t === undefined ?  : t;//

     var canAdd = len != $list.length;

     var $prev = $container.find("li:last");

     var str = common.uploadTemplate;

     // 执行上传

     if ($.trim($container.html()).length > ) {

         common.uploadImage(uploadResult, $container);

     }

     imgData && ($prev.find("img").removeClass(h).get().src = imgData);

     $prev.find(".plus").addClass(h);

     $prev.find("[type=file]").addClass(h);

     $prev.find(".file-img-del").removeClass(h);

     canAdd && $container.append(str.format(common.fileIndex));

     common.fileIndex++;

 }

 // 上传文件控件change

 function fileUploadChange(fileControl) {

     var imgClass = ".img-preview-list";

     var h = "hidden";

     viewFile(fileControl);

     function viewFile(fileControl) {

         var file = fileControl.files[];

         var reader = new FileReader();

         reader.onload = function (evt) {

             var data = evt.target.result;

             var $par = $(fileControl).parents(imgClass);

             common.appendFileUpload($par, data);

         }

         reader.readAsDataURL(file);

     }

 }

 // 上传成功和删除图片回调方法

 var imgUrl = { "head_img": null, "card_zheng": null, "card_fan": null, "certificate": null, "license": null };

 uploadResult = function (fileId, key) {

     imgUrl[key] = fileId;

     // 点击查看大图

     $(".openPhoto img").click(function () {

         $("#big_photo").attr("src", $(this).attr("src"));

         $.fancybox.open($("#panel"));

     });

 }

 common.uploadImgInit = function () {

     var imgClass = ".img-preview-list";

     var $box = $(imgClass);

     $box.on("click", ".file-img-del", function () {

         var $par = $(this).parents(imgClass);

         var len = $par.find("li").length;

         if (len == ) {

             var str = common.uploadTemplate;

             $par.append(str);

         }

         uploadResult(null, $par.attr("key"));

         $(this).parent().remove();

     });

     $box.each(function (index, item) {

         common.appendFileUpload($(item));

     });

 };

 // 上传图片到服务器

 common.uploadImage = function (submit, $box) {

     var files = $box.find("[type=file]");

     var count = ;

     var imgKey = $box.attr("key");

     var map = {};

     $(files).each(function (index, item) {

         if (item.files.length) {

             imgKey = $(this).parent().parent().attr("key");

             count++;

             proHub.uploadImage(item, successFn, failFn, imgKey);

         }

     });

     if (!count) {

         submit();

     }

     var curIndex = ;

     function successFn(result, key) {

         if (result.Code == ) {

             map[key] = result["FileId"];

             curIndex++;

             if (curIndex == count) {

                 submit(map[key], key);

             }

         } else {

             Config.Method.JudgeCode(result, );

         }

     }

     function failFn() {

         alert("图片上传失败，请重试！");

         $(".file-img-del").click();

     }

 }

 proHub.uploadImage = function (file, successFn, failFn, key) {

     $.ajaxFileUpload({

         url: "/api/Upload/ImgUpload",

         secureuri: false,

         fileUpload: file,

         dataType: 'json',

         data: { "token": token },

         success: function (data, status) {

             var str = $(data).text();

             var result = JSON.parse(str);

             successFn(result, key);

         }, error: function (data, status, e) {

             failFn();

         }

     });

 };

如果有写的不好或不对的地方，欢迎指出，必定及时纠正，虚心请教。

原创文章，代码都是从自己项目里贴出来的。转载请注明出处哦，亲~~~

巴特西

.NET WebAPI 实现图片上传（包括附带参数上传图片）

最新文章

热门文章