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

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

阅读量：4629 次

发布时间：2019-06-09

本文共 11436 字，大约阅读时间需要 38 分钟。

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

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

1         ///   2         /// 图片上传  [FromBody]string token  3         /// 
  4         /// 
       5         [HttpPost]  6         [Route("api/Upload/ImgUpload")]  7         public Task
     
       ImgUpload()  8         {  9             // 检查是否是 multipart/form-data  10             if (!Request.Content.IsMimeMultipartContent("form-data")) 11                 throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 12  13             // 文件保存目录路径  14             const string saveTempPath = "~/UploadFiles/"; 15             var dirTempPath = HttpContext.Current.Server.MapPath(saveTempPath); 16  17             // 设置上传目录  18             var provider = new MultipartFormDataStreamProvider(dirTempPath); 19  20             var task = Request.Content.ReadAsMultipartAsync(provider). 21                 ContinueWith
      
       (o => 22                 { 23                     var hash = new Hashtable(); 24                     var file = provider.FileData[0]; 25                     // 最大文件大小 26                     const int maxSize = 10000000; 27                     // 定义允许上传的文件扩展名  28                     const string fileTypes = "gif,jpg,jpeg,png,bmp"; 29  30                     // token验证 31                     var token = string.Empty; 32                     try 33                     { 34                         token = provider.FormData["token"].ToString(); 35                     } 36                     catch (Exception exception) 37                     { 38                         throw new Exception("未附带token，非法访问!", exception); 39                     } 40  41                     if (!string.IsNullOrEmpty(token)) 42                     { 43                         if (!CacheManager.TokenIsExist(token)) 44                         { 45                             throw new UserLoginException("Token已失效，请重新登陆!"); 46                         } 47                         if (accountInfoService.Exist_User_IsForzen(AccountHelper.GetUUID(token))) 48                         { 49                             CacheManager.RemoveToken(token); 50                             tempCacheService.Delete_OneTempCaches(new Guid(token)); 51                             throw new UserLoginException("此用户已被冻结,请联系管理员（客服）!"); 52                         } 53                     } 54                     else 55                     { 56                         throw new Exception("token为空，非法访问!"); 57                     } 58  59                     string orfilename = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"'); 60                     var fileinfo = new FileInfo(file.LocalFileName); 61                     if (fileinfo.Length <= 0) 62                     { 63                         hash["Code"] = -1; 64                         hash["Message"] = "请选择上传文件。"; 65                     } 66                     else if (fileinfo.Length > maxSize) 67                     { 68                         hash["Code"] = -1; 69                         hash["Message"] = "上传文件大小超过限制。"; 70                     } 71                     else 72                     { 73                         var fileExt = orfilename.Substring(orfilename.LastIndexOf('.')); 74                          75                         if (String.IsNullOrEmpty(fileExt) || 76                             Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) 77                         { 78                             hash["Code"] = -1; 79                             hash["Message"] = "不支持上传文件类型。"; 80                         } 81                         else 82                         { 83                             try 84                             { 85                                 AttachmentFileResultDTO attachmentFileResult; 86                                 attachmentFileService.UploadAttachmentFile(fileinfo, dirTempPath, fileExt, 87                                     Path.GetFileNameWithoutExtension(file.LocalFileName), out attachmentFileResult); 88  89                                 hash["Code"] = 0; 90                                 hash["Message"] = "上传成功"; 91                                 hash["FileId"] = attachmentFileResult.ID; 92                                 hash["FileName"] = attachmentFileResult.FileName + attachmentFileResult.FileType; 93                                 hash["NetImageUrl"] = attachmentFileResult.FileUrl; 94                             } 95                             catch (Exception exception) 96                             { 97                                 throw new Exception("上传失败!", exception); 98                             } 99                         }100                     }101                     return hash;102                 });103             return task;104         }

注：

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

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

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

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

1   createUploadForm: function (id, fileElementId) { 2         //create form  3         var formId = 'jUploadForm' + id; 4         var fileId = 'jUploadFile' + id; 5         var form = jQuery('
     
'); 6         var oldElement = jQuery('#' + fileElementId); 7         var newElement = jQuery(oldElement).clone(); 8         jQuery(oldElement).attr('id', fileId); 9         jQuery(oldElement).before(newElement);10         jQuery(oldElement).appendTo(form);11         //set attributes12         jQuery(form).css('position', 'absolute');13         jQuery(form).css('top', '-1200px');14         jQuery(form).css('left', '-1200px');15         jQuery(form).appendTo('body');16         return form;17     },

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

1       if (data) {2             for (var i in data) {3                 if (data.hasOwnProperty(i)) {4                     jQuery('').appendTo(form);5                 }6             }7         }

再找到调用这个函数的地方，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执行文件上传并且附带参数了。

1    $.ajaxFileUpload({ 2         url: "/api/Upload/ImgUpload", 3         secureuri: false, 4         fileUpload: file, 5         dataType: 'json', 6         data: { "token": token }, 7         success: function (data, status) { 8             var str = $(data).text(); 9             var result = JSON.parse(str);10             successFn(result, key);11         }, error: function (data, status, e) {12             failFn();13         }14     });

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

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

1 //图片上传  2 window.proHub = {};  3 common = {};  4 /**================================================================  5  文件上传  6  =================================================================*/  7 common.uploadTemplate = '' +  8 '
      
       ' +  9 '
       ' + 10 '
       ' + 11 '
      
' + 12 '' + 13 '' + 14 '
      
' + 15 '
'; 16  17 // 文件上传 18 common.fileIndex = 0; 19 // 添加文件上传框 20 common.appendFileUpload = function ($container, imgData, key) { 21     var h = "hidden"; 22  23     var $list = $container.find("li"); 24     var t = $container.attr("limit");//1 25     var len = t === undefined ? 0 : t;//0 26     var canAdd = len != $list.length; 27     var $prev = $container.find("li:last"); 28     var str = common.uploadTemplate; 29  30     // 执行上传 31     if ($.trim($container.html()).length > 0) { 32         common.uploadImage(uploadResult, $container); 33     } 34  35     imgData && ($prev.find("img").removeClass(h).get(0).src = imgData); 36     $prev.find(".plus").addClass(h); 37     $prev.find("[type=file]").addClass(h); 38     $prev.find(".file-img-del").removeClass(h); 39     canAdd && $container.append(str.format(common.fileIndex)); 40  41     common.fileIndex++;  44 } 45  46 // 上传文件控件change 47 function fileUploadChange(fileControl) { 48     var imgClass = ".img-preview-list"; 49     var h = "hidden"; 50     viewFile(fileControl); 51  52     function viewFile(fileControl) { 53         var file = fileControl.files[0]; 54  56         var reader = new FileReader(); 57         reader.onload = function (evt) { 58             var data = evt.target.result; 59             var $par = $(fileControl).parents(imgClass); 60             common.appendFileUpload($par, data); 61         } 62         reader.readAsDataURL(file); 63     } 64 } 65  66 // 上传成功和删除图片回调方法  67 var imgUrl = { "head_img": null, "card_zheng": null, "card_fan": null, "certificate": null, "license": null }; 68 uploadResult = function (fileId, key) {
     70     imgUrl[key] = fileId; 71     // 点击查看大图 72     $(".openPhoto img").click(function () { 73         $("#big_photo").attr("src", $(this).attr("src")); 74         $.fancybox.open($("#panel")); 75     }); 76 } 77  78 common.uploadImgInit = function () { 79     var imgClass = ".img-preview-list"; 80     var $box = $(imgClass); 81  82     $box.on("click", ".file-img-del", function () { 83         var $par = $(this).parents(imgClass); 84         var len = $par.find("li").length; 85         if (len == 1) { 86             var str = common.uploadTemplate; 87             $par.append(str); 88         } 89         uploadResult(null, $par.attr("key")); 90         $(this).parent().remove(); 91     }); 92  93     $box.each(function (index, item) { 94  95         common.appendFileUpload($(item)); 96     }); 97 }; 98  99 // 上传图片到服务器100 common.uploadImage = function (submit, $box) {101     var files = $box.find("[type=file]");102     var count = 0;103     var imgKey = $box.attr("key");104     var map = {};105 106     $(files).each(function (index, item) {107         if (item.files.length) {108             imgKey = $(this).parent().parent().attr("key");109             count++;110             proHub.uploadImage(item, successFn, failFn, imgKey);111         }112     });113     if (!count) {114         submit();115     }116     var curIndex = 0;117     function successFn(result, key) {118         if (result.Code == 0) {119             map[key] = result["FileId"];120             curIndex++;121 122             if (curIndex == count) {123                 submit(map[key], key);124             }125         } else {126             Config.Method.JudgeCode(result, 1);127         }128     }129 131     function failFn() {132         alert("图片上传失败，请重试！");133         $(".file-img-del").click();134     }135 }136 137 proHub.uploadImage = function (file, successFn, failFn, key) {138     $.ajaxFileUpload({139         url: "/api/Upload/ImgUpload",140         secureuri: false,141         fileUpload: file,142         dataType: 'json',143         data: { "token": token },144         success: function (data, status) {145             var str = $(data).text();146             var result = JSON.parse(str);147             successFn(result, key);148         }, error: function (data, status, e) {149             failFn();150         }151     });152 };

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

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

转载于:https://www.cnblogs.com/csqb-511612371/p/4871574.html

你可能感兴趣的文章