.NET WebAPI 實現圖片上傳（包括附帶參數上傳圖片）

時間 2019-11-08

標籤 webapi 實現圖片上傳包括附帶參數简体版

原文原文鏈接

博主的項目，客戶端是APP，考慮到之後也可能會應用到微信端、網站等，圖片上傳方法就須要兼容多端，而且以目前的設計，不容許非登陸用戶上傳圖片，就得在上傳時解決附帶參數上傳圖片的問題。css

先來看看後臺方法（邏輯都寫在了一塊兒，有點亂，分佈式文件系統還沒作好，暫時存在了本地...）：html

  1         /// <summary>
  2         /// 圖片上傳  [FromBody]string token
  3         /// </summary>
  4         /// <returns></returns>
  5         [HttpPost]
  6         [Route("api/Upload/ImgUpload")]
  7         public Task<Hashtable> 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<Hashtable>(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         }

注：jquery

1.第31行至57行是對附帶參數token進行驗證，由於博主的需求是隻開放登陸用戶上傳圖片ajax

2.第34行必定要tostring()，由於咱們的參數也是以二進制數據格式上傳的json

前臺目前是以jquery作的測試，使用了ajaxfileupload.js來上傳文件。不過博主下載的ajaxfileupload.js並不支持附帶參數上傳，不知道是否是沒找到好資源，無論了，本身打開文件瞅瞅...源碼也不長一兩百行，那就本身動手改改唄。(若是你已下載到支持附帶參數上傳的js，請自動忽略這一部分)api

找到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('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
 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 attributes
12         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('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
5                 }
6             }
7         }

再找到調用這個函數的地方，ajaxFileUpload函數中有這樣一行：app

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 = '<li class="fl pr">' +
  8 '<div class="plus abs-mm fullLayer">' +
  9 '<span class="abs-mm"></span>' +
 10 '<span class="abs-mm"></span>' +
 11 '</div>' +
 12 '<img class="abs-mm hidden"/>' +
 13 '<input class="file-input" type="file" name="file{0}" accept="image/*" onchange="fileUploadChange(this);"/>' +
 14 '<div class="file-img-del hidden"></div>' +
 15 '</li>';
 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 };