分離文件服務器-文件上傳


做了接近兩年的外包,如今回歸到做公司自己的產品,不同的工作模式就會有不同的系統設計,先看一組圖:
 
與前者相比,后者在應用層和展現層做了更清晰的划分,好處不可描述。但隨之而來的問題是不同站點間的文件上傳混亂不易管理,於是分離出文件服務器,統一文件的上傳、訪問、管理。下面是我在分離文件服務器過程中遇到的一些問題以及解決方案(以圖片為例)。
 
圖片上傳配置
圖片上傳配置包括限制上傳的圖片類型、圖片大小、圖片尺寸、以及水印類型、水印文件位置等等。具體可按自己的需求進行配置,並不局限於此。
{
    "ImageTypeLimit": "gif,jpg,png,bmp,jpeg",
    "ImageSizeLimit": 51200,
    "ImageWidthLimit": 1200,
    "ImageHeightLimit": 1200,
    "WatermarkType": 2,
    "WatermarkPosition": 303,
    "WatermarkAddress": "F:\\shuiyin.png",
    "WatermarkWords": "liuxx",
    "WatermarkWordsFont": "Verdana",
    "WatermarkWordsFontSize": 12,
    "WatermarkTransparency": 8
}

由於系統還很稚嫩,也沒有傳說中所有站點通用的配置中心,那么后台系統需要對文件服務器配置進行管理的方式大概有兩種:

1、配置數據存儲在數據庫,提供給這兩個站點同時訪問。
2、配置數據獨立存儲於文件服務器,管理站點通過接口獲取以及修改。
 
因為現階段我們對於圖片管理的需求不是很強烈,整個文件服務器幾乎都沒有與數據庫打交道的需求,所以我們選擇了第二種方式。至於通過接口修改配置的安全性,我們使用的是ip白名單限制。
 
跨域上傳文件
跨域上傳文件主要涉及到ajax跨域上傳文件以及ueditor跨域。跨域請求時瀏覽器會首先發送一次options嗅探,同時header帶上origin,判斷是否有跨域請求權限,服務器響應access control allow origin的值,供瀏覽器與origin匹配,如果匹配則正式發送post請求。
 
知道原理解決起來就方便多了,兩個步驟:
1、在webconfig中添加:
<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="POST, PUT />
    </customHeaders>
</httpProtocol>

2、在Global.asax中添加代碼處理瀏覽器發起的options請求:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    var req = System.Web.HttpContext.Current.Request;
    if (req.HttpMethod == "OPTIONS")//過濾options請求,用於js跨域
    {
        Response.StatusCode = 200;
        Response.SubStatusCode = 200;
        Response.End();
    }
}    

我們的文件上傳使用的是webapi,mvc和webform應該也可以使用相同的方式,或者選擇第三方庫如:Microsoft.AspNet.WebApi.Cors來處理,有興趣的可以自己嘗試,我覺得沒那么麻煩也就沒有繼續折騰。

 
關於ueditor將上傳的文件保存在文件服務器,最簡單的方式是將ueditor直接部署在文件服務器,然后使用域名引入js,如果上傳還是出現跨域問題,並且文件服務器和使用ueditor的網站 根域名相同,可按下面兩個步驟進行解決:
1、在文件服務器中ueditor/dialogs/internal.js頂部添加代碼:document.domain = "根域名";
2、在引用ueidtor的頁面頂部js中添加document.domain = "根域名";
最后,ueditor的單圖上傳死活跨域上傳失敗,對着源碼折騰了四個小時無果,解決了跨域顯示出問題,解決了顯示跨域又不行,后面看到官方文檔上的說明后
也就暫時放棄了,有興趣的朋友可以嘗試一下。
 
文件保存
上傳文件的保存基本上人人都會,對於webapi文件上傳有疑惑的可以參考這篇博客,講的非常詳細了: http://www.cnblogs.com/ang/archive/2012/10/24/2634176.html
 
拿到上傳的文件后要做的事情就是根據自己的文件上傳配置做驗證,過濾非法的文件並對圖片做處理,如圖片添加水印、生成縮略圖等等。網上代碼有很多,並且每個系統對於水印和縮略圖的需求會不相同,這里就不貼代碼了。比如我們的就有兩個比較有意思的需求:
1、水印圖片是按照800*600的背景圖做的,要求對上傳的圖片按最小的長寬比對水印進行縮放后再添加到圖片上。
2、圖片訪問時根據前端提供的合法參數自動生成縮略圖並保存,下次訪問直接返回縮略圖。這個我會在下一篇博客中具體介紹我的思路以及最后的實現方式。
 
順便提一下對ueditor上傳的圖片進行處理(如:打水印),網上也有不少相關的帖子,大概思路無非就是重寫圖片上傳的路徑,然后再按ueditor的格式返回數據(在xx版本所有文件上傳統一為一個路徑之后,這個方式做起來就不是那么優雅了)。我們的做法是:嗯~~~,改源碼。步驟也很簡單:
1、ueditor/net/controller.ashx中的配置改為從我們的上傳配置中讀取。
2、ueditor/net/App_Code/UploadHandler.cs中文件保存時做處理。
 
看了ueditor文件上傳的服務端代碼,對於文件上傳又有了新的認識,其實可以拋開所謂webform、mvc、webapi的區別,直接使用IHttpHandler處理上傳的圖片流,簡單直接又粗暴得無可挑剔。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM