分享WebApi2 檔案圖片上傳與下載功能實例-C#.Net教程-PHP中文網

首頁

後端開發

C#.Net教程

分享WebApi2 檔案圖片上傳與下載功能實例

零下一度

May 31, 2017 pm 01:59 PM

apiweb

這篇文章主要介紹了WebApi2 檔案圖片上傳與下載功能,需要的朋友可以參考下

#Asp.Net Framework webapi2 檔案上傳與下載#前端介面採用Ajax的方式執行

一、專案結構

1.App_Start配置了跨域訪問，以免請求時候因跨域問題不能提交。具體的跨域配置方式如下，了解的朋友請自行略過。

跨網域設定：NewGet安裝dll Microsofg.AspNet.Cors

然後在App_Start 資料夾下的WebApiConfig.cs中寫入跨網域設定碼。

public static class WebApiConfig
  {
    public static void Register(HttpConfiguration config)
    {
      // Web API configuration and services
      // Web API routes
      config.MapHttpAttributeRoutes();
      // Web API configuration and services
      //跨域配置 //need reference from nuget
      config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
      config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
      );
      //if config the global filter input there need not write the attributes
      //config.Filters.Add(new App.WebApi.Filters.ExceptionAttribute_DG());
    }
  }

跨域就算完成了，請自行測試。

2.新建兩個控制器，一個PicturesController.cs，一個FilesController.cs當然圖片也是文件，這裡圖片和文件以不同的方式處理的，因為圖片的方式文件上傳沒有成功，所以另尋他路，如果在座的有更好的方式，請不吝賜教！

二、專案程式碼

1.我們先說圖片上傳、下載控制器接口，這裡其實沒什麼好說的，就一個Get取得文件，參數是文件全名；Post上傳文件；直接上碼。

using QX_Frame.App.WebApi;
using QX_Frame.FilesCenter.Helper;
using QX_Frame.Helper_DG;
using QX_Frame.Helper_DG.Extends;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Web.Http;
/**
 * author:qixiao
 * create:2017-5-26 16:54:46
 * */
namespace QX_Frame.FilesCenter.Controllers
{
  public class PicturesController : WebApiControllerBase
  {
    //Get : api/Pictures
    public HttpResponseMessage Get(string fileName)
    {
      HttpResponseMessage result = null;
      DirectoryInfo directoryInfo = new DirectoryInfo(IO_Helper_DG.RootPath_MVC + @"Files/Pictures");
      FileInfo foundFileInfo = directoryInfo.GetFiles().Where(x => x.Name == fileName).FirstOrDefault();
      if (foundFileInfo != null)
      {
        FileStream fs = new FileStream(foundFileInfo.FullName, FileMode.Open);
        result = new HttpResponseMessage(HttpStatusCode.OK);
        result.Content = new StreamContent(fs);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        result.Content.Headers.ContentDisposition.FileName = foundFileInfo.Name;
      }
      else
      {
        result = new HttpResponseMessage(HttpStatusCode.NotFound);
      }
      return result;
    }
    //POST : api/Pictures
    public async Task<IHttpActionResult> Post()
    {
      if (!Request.Content.IsMimeMultipartContent())
      {
        throw new Exception_DG("unsupported media type", 2005);
      }
      string root = IO_Helper_DG.RootPath_MVC;
      IO_Helper_DG.CreateDirectoryIfNotExist(root + "/temp");
      var provider = new MultipartFormDataStreamProvider(root + "/temp");
      // Read the form data. 
      await Request.Content.ReadAsMultipartAsync(provider);
      List<string> fileNameList = new List<string>();
      StringBuilder sb = new StringBuilder();
      long fileTotalSize = 0;
      int fileIndex = 1;
      // This illustrates how to get the file names.
      foreach (MultipartFileData file in provider.FileData)
      {
        //new folder
        string newRoot = root + @"Files/Pictures";
        IO_Helper_DG.CreateDirectoryIfNotExist(newRoot);
        if (File.Exists(file.LocalFileName))
        {
          //new fileName
          string fileName = file.Headers.ContentDisposition.FileName.Substring(1, file.Headers.ContentDisposition.FileName.Length - 2);
          string newFileName = Guid.NewGuid() + "." + fileName.Split(&#39;.&#39;)[1];
          string newFullFileName = newRoot + "/" + newFileName;
          fileNameList.Add($"Files/Pictures/{newFileName}");
          FileInfo fileInfo = new FileInfo(file.LocalFileName);
          fileTotalSize += fileInfo.Length;
          sb.Append($" #{fileIndex} Uploaded file: {newFileName} ({ fileInfo.Length} bytes)");
          fileIndex++;
          File.Move(file.LocalFileName, newFullFileName);
          Trace.WriteLine("1 file copied , filePath=" + newFullFileName);
        }
      }
      return Json(Return_Helper.Success_Msg_Data_DCount_HttpCode($"{fileNameList.Count} file(s) /{fileTotalSize} bytes uploaded successfully!   Details -> {sb.ToString()}", fileNameList, fileNameList.Count));
    }
  }
}

裡面可能有部分程式碼在Helper幫助類別裡面寫的，其實也只是取得伺服器根路徑和如果判斷資料夾不存在則建立目錄，這兩個程式碼的實作如下：

 public static string RootPath_MVC
     {
       get { return System.Web.HttpContext.Current.Server.MapPath("~"); }
     }
//create Directory
    public static bool CreateDirectoryIfNotExist(string filePath)
    {
      if (!Directory.Exists(filePath))
      {
        Directory.CreateDirectory(filePath);
      }
      return true;
    }

2.檔案上傳下載介面和圖片大同小異。

using QX_Frame.App.WebApi;
using QX_Frame.FilesCenter.Helper;
using QX_Frame.Helper_DG;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
/**
 * author:qixiao
 * create:2017-5-26 16:54:46
 * */
namespace QX_Frame.FilesCenter.Controllers
{
  public class FilesController : WebApiControllerBase
  {
    //Get : api/Files
    public HttpResponseMessage Get(string fileName)
    {
      HttpResponseMessage result = null;
      DirectoryInfo directoryInfo = new DirectoryInfo(IO_Helper_DG.RootPath_MVC + @"Files/Files");
      FileInfo foundFileInfo = directoryInfo.GetFiles().Where(x => x.Name == fileName).FirstOrDefault();
      if (foundFileInfo != null)
      {
        FileStream fs = new FileStream(foundFileInfo.FullName, FileMode.Open);
        result = new HttpResponseMessage(HttpStatusCode.OK);
        result.Content = new StreamContent(fs);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        result.Content.Headers.ContentDisposition.FileName = foundFileInfo.Name;
      }
      else
      {
        result = new HttpResponseMessage(HttpStatusCode.NotFound);
      }
      return result;
    }
    //POST : api/Files
    public async Task<IHttpActionResult> Post()
    {
      //get server root physical path
      string root = IO_Helper_DG.RootPath_MVC;
      //new folder
      string newRoot = root + @"Files/Files/";
      //check path is exist if not create it
      IO_Helper_DG.CreateDirectoryIfNotExist(newRoot);
      List<string> fileNameList = new List<string>();
      StringBuilder sb = new StringBuilder();
      long fileTotalSize = 0;
      int fileIndex = 1;
      //get files from request
      HttpFileCollection files = HttpContext.Current.Request.Files;
      await Task.Run(() =>
      {
        foreach (var f in files.AllKeys)
        {
          HttpPostedFile file = files[f];
          if (!string.IsNullOrEmpty(file.FileName))
          {
            string fileLocalFullName = newRoot + file.FileName;
            file.SaveAs(fileLocalFullName);
            fileNameList.Add($"Files/Files/{file.FileName}");
            FileInfo fileInfo = new FileInfo(fileLocalFullName);
            fileTotalSize += fileInfo.Length;
            sb.Append($" #{fileIndex} Uploaded file: {file.FileName} ({ fileInfo.Length} bytes)");
            fileIndex++;
            Trace.WriteLine("1 file copied , filePath=" + fileLocalFullName);
          }
        }
      });
      return Json(Return_Helper.Success_Msg_Data_DCount_HttpCode($"{fileNameList.Count} file(s) /{fileTotalSize} bytes uploaded successfully!   Details -> {sb.ToString()}", fileNameList, fileNameList.Count));
    }
  }
}

實現了上述兩個控制器程式碼以後，我們需要前端程式碼來偵錯對接，程式碼如下所示。

<!doctype>
<head>
  <script src="jquery-3.2.0.min.js"></script>
  <!--<script src="jquery-1.11.1.js"></script>-->
  <!--<script src="ajaxfileupload.js"></script>-->
  <script>
    $(document).ready(function () {
      var appDomain = "http://localhost:3997/";
      $("#btn_fileUpload").click(function () {
        /**
         * 用ajax方式上传文件  -----------
         * */
        //-------asp.net webapi fileUpload
        //
        var formData = new FormData($("#uploadForm")[0]);
        $.ajax({
          url: appDomain + &#39;api/Files&#39;,
          type: &#39;POST&#39;,
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (data) {
            console.log(JSON.stringify(data));
          },
          error: function (data) {
            console.log(JSON.stringify(data));
          }
        });
        //----end asp.net webapi fileUpload
        //----.net core webapi fileUpload
        // var fileUpload = $("#files").get(0);
        // var files = fileUpload.files;
        // var data = new FormData();
        // for (var i = 0; i < files.length; i++) {
        //    data.append(files[i].name, files[i]);
        // }
        // $.ajax({
        //   type: "POST",
        //   url: appDomain+&#39;api/Files&#39;,
        //   contentType: false,
        //   processData: false,
        //   data: data,
        //   success: function (data) {
        //     console.log(JSON.stringify(data));
        //   },
        //   error: function () {
        //     console.log(JSON.stringify(data));
        //   }
        // });
        //--------end net core webapi fileUpload
        /**
         * ajaxfileupload.js 方式上传文件
         * */
        // $.ajaxFileUpload({
        //   type: &#39;post&#39;,
        //   url: appDomain + &#39;api/Files&#39;,
        //   secureuri: false,
        //   fileElementId: &#39;files&#39;,
        //   success: function (data) {
        //     console.log(JSON.stringify(data));
        //   },
        //   error: function () {
        //     console.log(JSON.stringify(data));
        //   }
        // });
      });
      //end click
    })
  </script>
</head>
<title></title>
<body>
  <article>
    <header>
      <h2 id="article-form">article-form</h2>
    </header>
    <p>
      <form action="/" method="post" id="uploadForm" enctype="multipart/form-data">
        <input type="file" id="files" name="files" placeholder="file" multiple>file-multiple属性可以选择多项<br><br>
        <input type="button" id="btn_fileUpload" value="fileUpload">
      </form>
    </p>
  </article>
</body>

至此，我們的功能已全部實現，下面我們來測試一下：

可見，檔案上傳成功，按預期格式返回！

下面我們測試單圖上傳->

然後我們按回傳的位址進行存取圖片地址。

發現並無任何壓力！

下面測試多圖片上傳->

完美~

至此，我們已經實現了WebApi2檔案和圖片上傳，下載的全部功能。

這裡要注意Web.config的設定上傳檔案支援的總大小，我這裡設定的是最大支援的檔案大小為1MB

<requestFiltering>
  <requestLimits maxAllowedContentLength="1048576" />
</requestFiltering>
  <system.webServer>
   <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
   </handlers>
   <security>
   <requestFiltering>
    <requestLimits maxAllowedContentLength="1048576" /><!--1MB-->
    </requestFiltering>
  </security>
  </system.webServer>

【相關推薦】

1. ASP.NET免費視訊教學

2. 詳細介紹ASP.NET MVC--路由

3. 詳細介紹ASP.NET MVC--控制器（controller）

4. 詳細介紹ASP.NET MVC--檢視

以上是分享WebApi2 檔案圖片上傳與下載功能實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

c＃.net適合您嗎？評估其適用性Apr 13, 2025 am 12:03 AM

c＃.netissutableforenterprise-levelapplications withemofrosoftecosystemdueToItsStrongTyping，richlibraries，androbustperraries，androbustperformance.however，itmaynotbeidealfoross-platement forment forment forment forvepentment offependment dovelopment toveloperment toveloperment whenrawspeedsportor whenrawspeedseedpolitical politionalitable，

.NET中的C＃代碼：探索編程過程Apr 12, 2025 am 12:02 AM

C#在.NET中的編程過程包括以下步驟：1)編寫C#代碼，2)編譯為中間語言（IL），3)由.NET運行時（CLR）執行。 C#在.NET中的優勢在於其現代化語法、強大的類型系統和與.NET框架的緊密集成，適用於從桌面應用到Web服務的各種開發場景。

C＃.NET：探索核心概念和編程基礎知識Apr 10, 2025 am 09:32 AM

C#是一種現代、面向對象的編程語言，由微軟開發並作為.NET框架的一部分。 1.C#支持面向對象編程（OOP），包括封裝、繼承和多態。 2.C#中的異步編程通過async和await關鍵字實現，提高應用的響應性。 3.使用LINQ可以簡潔地處理數據集合。 4.常見錯誤包括空引用異常和索引超出範圍異常，調試技巧包括使用調試器和異常處理。 5.性能優化包括使用StringBuilder和避免不必要的裝箱和拆箱。

測試C＃.NET應用程序：單元，集成和端到端測試Apr 09, 2025 am 12:04 AM

C#.NET應用的測試策略包括單元測試、集成測試和端到端測試。 1.單元測試確保代碼的最小單元獨立工作，使用MSTest、NUnit或xUnit框架。 2.集成測試驗證多個單元組合的功能，常用模擬數據和外部服務。 3.端到端測試模擬用戶完整操作流程，通常使用Selenium進行自動化測試。

高級C＃.NET教程：ACE您的下一次高級開發人員面試Apr 08, 2025 am 12:06 AM

C#高級開發者面試需要掌握異步編程、LINQ、.NET框架內部工作原理等核心知識。 1.異步編程通過async和await簡化操作，提升應用響應性。 2.LINQ以SQL風格操作數據，需注意性能。 3..NET框架的CLR管理內存，垃圾回收需謹慎使用。

C＃.NET面試問題和答案：提高您的專業知識Apr 07, 2025 am 12:01 AM

C#.NET面試問題和答案包括基礎知識、核心概念和高級用法。 1)基礎知識：C#是微軟開發的面向對象語言，主要用於.NET框架。 2)核心概念：委託和事件允許動態綁定方法，LINQ提供強大查詢功能。 3)高級用法：異步編程提高響應性，表達式樹用於動態代碼構建。

使用C＃.NET建築微服務：建築師實用指南Apr 06, 2025 am 12:08 AM

C#.NET是構建微服務的熱門選擇，因為其生態系統強大且支持豐富。 1)使用ASP.NETCore創建RESTfulAPI，處理訂單創建和查詢。 2)利用gRPC實現微服務間的高效通信，定義和實現訂單服務。 3)通過Docker容器化微服務，簡化部署和管理。

C＃.NET安全性最佳實踐：防止常見漏洞Apr 05, 2025 am 12:01 AM

C#和.NET的安全最佳實踐包括輸入驗證、輸出編碼、異常處理、以及身份驗證和授權。 1)使用正則表達式或內置方法驗證輸入，防止惡意數據進入系統。 2)輸出編碼防止XSS攻擊，使用HttpUtility.HtmlEncode方法。 3)異常處理避免信息洩露，記錄錯誤但不返回詳細信息給用戶。 4)使用ASP.NETIdentity和Claims-based授權保護應用免受未授權訪問。

See all articles