在前面介紹的隨筆《基于SqlSugar的開發框架循序漸進介紹（7）-- 在檔案上傳模塊中采用選項模式【Options】處理常規上傳和FTP檔案上傳》中介紹過在檔案上傳處理的程序中，整合了本地檔案上傳和基于FTP方式的上傳檔案的處理整合，本篇隨筆繼續介紹檔案上傳的處理，基于選項模式【Options】方式整合基于阿里云OSS物件存盤的處理方式，
1、選項模式【Options】的處理
檔案上傳處理應該由程式進行配置，決定使用那種方式，那么這里面我們為了彈性化處理， 在檔案上傳模塊中采用選項模式【Options】處理常規上傳和FTP檔案上傳的配置引數資訊，
微軟引入選項模式,它是用于配置框架服務使用的設定. 選項模式由Microsoft.Extensions.OptionsNuGet包實作,除了ASP.NET Core應用,它還適用于任何型別的應用程式，如果需要了解，微軟的檔案詳細解釋了選項模式，
選項模式的限制之一是你只能決議(注入) IOptions <MyOptions> 并在依賴注入配置完成(即所有模塊的ConfigureServices方法完成)后獲取選項值，如果你正在開發一個模塊,可能需要讓開發者能夠設定一些選項,并在依賴注入注冊階段使用這些選項. 你可能需要根據選項值配置其他服務或更改依賴注入的注冊代碼，IOptions<>是單例，因此一旦生成了，除非通過代碼的方式更改，它的值是不會更新的，
之前介紹過的檔案上傳處理，
一個是本地檔案處理，一個是FTP檔案處理，它們選擇那種方式，依賴于配置引數的資訊，如下示意圖所示，
當我們增加了物件存盤OSS方式后，可以擴展下這個圖示如下所示，
在本地檔案處理程序中，如果是Web API方式呼叫服務層，那么就在Web API所在的檔案系統中，如果是Winform界面直接呼叫服務層，那么就是在當前系統中處理檔案，這種方式可以有效的管理我們的檔案資訊，
在FTP檔案處理程序中，則是根據選項引數的資訊，呼叫FluentFTP類別庫進行檔案的上傳操作，
在OSS物件存盤處理程序中，我們一般基于阿里云、騰訊云等這些云服務OSS的處理方式，一般它們會提供相應開發語言的SDK，我們參考并進行整合即可，
基于選項模式，根據我們的處理方式，我們定義一個物件，用于承載上傳引數的資訊，如下代碼所示，
/// <summary> /// 檔案上傳處理的選項資訊 /// </summary> public class UploadSettingOptions { /// <summary> /// 可指定的存盤物理地址，如C:\\Attachment，如果沒有配置項AttachmentBasePath，則默認一個相對目錄， /// </summary> public string AttachmentBasePath { get; set; } /// <summary> /// 指定附件上傳的方式，如ftp為FTP方式，為空則為普通方式 /// </summary> public string AttachmentUploadType { get; set; } /// <summary> /// FTP上傳配置 /// </summary> public FtpProviderOptions FtpProvider { get; set; } /// <summary> /// OSS存盤的配置 /// </summary> public OSSProviderOptions OSSProvider { get; set; } }
其中本地介紹OSS存盤處理的配置選項物件如下所示，
/// <summary> /// OSS物件存盤配置選項 /// </summary> public sealed class OSSProviderOptions { /// <summary> /// 指定提供商 /// </summary> public OSSProvider Provider { get; set; } /// <summary> /// 終結點 /// </summary> public string Endpoint { get; set; } public string AccessKey { get; set; } public string SecretKey { get; set; } public string Region { get; set; } public bool IsEnableHttps { get; set; } = true; public bool IsEnableCache { get; set; } public string Bucket { get; set; } }
對應WebAPI的appSettngs.json檔案配置項內容如下:
2、阿里云的OSS存盤設定處理
對于阿里云的OSS來說，對應的AccesKey和SecretKey自己可以通過查看賬戶的資訊可以獲取到，
我們開始需要添加一個Bucket節點，用來存放相關的檔案，并且需要開啟對應的權限，如下所示，
一旦正式允許可以上傳檔案，那么檔案存盤在對應的Bucket專案中，如下所示，
準備好這些前期作業后，我們如果需要在WebAPI端進行OSS存盤的處理，可以利用阿里云的OSS 的SDK進行處理即可，如下所示，
SDK的常規使用很簡單，我們可以參考它的aliyun-oss-csharp-sdk 案例來上傳處理即可，
例如它的上傳檔案的處理代碼如下所示：
OssClient client = new OssClient(endpoint, accessKeyId, accessKeySecret); client.PutObject(bucketName, key, filePathToUpload);
在檔案處理的通用上傳處理函式里面，我們根據配置內容選擇不同的上傳模式，
/// <summary> /// 上傳檔案（根據組態檔選擇合適的上傳方式） /// </summary> /// <param name="info">檔案資訊（包含流資料）</param> /// <returns></returns> public async Task<CommonResult> Upload(FileUploadInfo info) { var uploadType = this._options.AttachmentUploadType; if (string.IsNullOrEmpty(uploadType)) { return await this.UploadByNormal(info); } else if (uploadType.Equals("ftp", StringComparison.OrdinalIgnoreCase)) { return await this.UploadByFTP(info); } else if(uploadType.Equals("oss", StringComparison.OrdinalIgnoreCase)) { return await this.UploadByOSS(info); } else { throw new ArgumentException("AttachmentUploadType配置指定了無效的值， 請置空, 填寫ftp或者填寫oss，"); } }
由于本篇主要介紹OSS的物件存盤方式，因此我們來看看對應的OSS上傳處理的操作，
和其他上傳（如FTP上傳）方式類似，我們也是構建對應的資訊后呼叫OSS的SDK處理即可，如下代碼所示，
/// <summary> /// 使用阿里云的OSS服務上傳檔案 /// </summary> /// <param name="info"></param> /// <returns></returns> public async Task<CommonResult> UploadByOSS(FileUploadInfo info) { var result = new CommonResult(); var ossOptions = this._options.OSSProvider; if(ossOptions != null) { //上傳獲得的相對路徑 string category = info.Category; if (string.IsNullOrEmpty(category)) { category = "Photo"; } //OSS的檔案路徑不能以正斜線（/）或者反斜線（\）字符開頭， //確定日期時間目錄（格式：yyyy-MM），不存在則創建 string savePath = string.Format("{0}-{1:D2}/{2}", DateTime.Now.Year, DateTime.Now.Month, category); var ext = FileUtil.GetExtension(info.FileName); var finalName = string.Format("{0}{1}", Guid.NewGuid().ToString(), ext);//FileUtil.GetFileName(file); var filePath = string.Concat(savePath, "/", finalName); var stream = FileUtil.BytesToStream(info.FileData); //使用阿里云的OSS服務上傳檔案 var client = new OssClient(ossOptions.Endpoint, ossOptions.AccessKey, ossOptions.SecretKey); client.PutObject(ossOptions.Bucket, filePath, stream); //基礎路徑和部分路徑 info.BasePath = $"{(ossOptions.IsEnableHttps ? "https" : "http")}://{ossOptions.Bucket}.{ossOptions.Endpoint}"; info.SavePath = filePath; info.AddTime = DateTime.Now; result.Success = await base.InsertAsync(info); if (result.Success) { //記錄回傳值, Data1為具體的URL路徑 //生成外鏈地址 方便前端預覽 result.Data1 = info.BasePath.UriCombine(savePath); result.Data2 = savePath; } else { result.ErrorMessage = "資料寫入資料庫出錯，"; } } else { result.ErrorMessage = "OSS配置資訊不正確或沒有啟用"; } return result; }
最終我們上傳的檔案串列如上圖所示，
3、在Vue3+ElementPlus+Vite的前端專案上測驗前端上傳檔案的處理
我們在一個前端的編輯器 @wangeditor 上整合圖片上傳的處理來展示這個OSS物件保存的操作，案例需要前端專案安裝對應的插件，如下所示，
前端頁面參考插件物件的代碼如下所示
<div class="wangeditor"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" /> </div>
在腳本代碼中引入物件的樣式和物件，
<script setup lang="ts"> import '@wangeditor/editor/dist/css/style.css'; // 引入 css import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; defineOptions({ name: 'Editor' }); const mode = 'default'; // 編輯器實體，必須用 shallowRef const editorRef = shallowRef();
為了配置上傳圖片檔案的處理操作，我們需要根據編輯器的介紹，以及我們WebAPI端的處理函式定義，在腳本部分中增加對應的配置資訊，如下代碼所示
const editorConfig = { placeholder: '請輸入內容...', MENU_CONF: { // 配置默認字號 // 配置上傳圖片 uploadImage: { // 上傳圖片請求介面路徑 server: '/api/FileUpload/PostUpload', // 后端接收的檔案名稱 fieldName: 'multipartFile', maxFileSize: 10 * 1024 * 1024, // 上傳圖片10M // 上傳的圖片型別 allowedFileTypes: ['image/*'], // 自定義增加 http header headers: { Authorization: 'Bearer ' + getAccessToken() }, // 自定義上傳引數，例如傳遞驗證的 token 等，引數會被添加到 formData 中，一起上傳到服務端， meta: { guid: '', folder: '檔案圖片' }, // 將 meta 拼接到 url 引數中，默認 false metaWithUrl: false, // 小于該值就插入 base64 格式（而不上傳），默認為 0 base64LimitSize: 10 * 1024, // 10MB // 自定義上傳圖片回傳格式【后端回傳的格式】 customInsert(res: any, insertFn: InsertFnType) { console.log(res); if (!res.success) { ElMessage.error('上傳檔案失敗，' + res.error); return; } // 從 res 中找到 url alt href ，然后插入圖片 ,根據后端實際回傳的欄位來 var result = res.result as Array<ResponseFileInfo>; if (result.length > 0) { console.log(result[0]); insertFn(result[0].url, result[0].name, result[0].url); } }, // 單個檔案上傳成功之后 onSuccess(file: File, res: any) { if (res.success) { ElMessage.success(`${file.name} 上傳成功`); return; } else { ElMessage.warning(`${file.name} 上傳出了點例外`); return; } }, // 單個檔案上傳失敗 onFailed(file: File, res: any) { console.log(res); ElMessage.error(`${file.name} 上傳失敗`); }, // 上傳錯誤，或者觸發 timeout 超時 one rror(file: File, err: any, res: any) { console.log(err, res); ElMessage.error(`${file.name} 上傳出錯`); } } } };
其中主要的就是需要增加授權的令牌頭部資訊，以及對應上傳需要用到的引數，還有就是回傳的介面物件里面，需要根據Web API的定義，然后轉換為本地識別的類別進行展示即可，如定義的 customInsert 函式，
檔案上傳成功后，可以看到在編輯器中插入了對應的圖片檔案，圖片地址指向的是阿里云OSS的路徑，
在資料庫的檔案記錄中，我們可以看到對應的路徑資訊，如下所示，
如果我們需要在專案中實作業務的圖片上傳功能，如下界面所示的效果，
可以參考隨筆《基于SqlSugar的開發框架循序漸進介紹（13）-- 基于ElementPlus的上傳組件進行封裝，便于專案使用》介紹內容進行自定義上傳檔案的處理即可，
<el-form-item label="資料檔案"> <my-upload v-model="viewForm.attachGUID" :data="{ guid: viewForm.attachGUID, folder: '用戶圖片' }" disabled /> </el-form-item>
以上就是我們針對不同的上傳方式處理的操作，對于OSS的檔案上傳，我們通過整合阿里云的OSS的SDK，直接呼叫進行處理即可，非常方便，對于其他類似的平臺，也可以針對它們提供的SDK進行擴展即可，
SqlSugar開發框架介紹：https://www.iqidi.com/Framework/sugarIndex.htm
系列文章：
《基于SqlSugar的開發框架的循序漸進介紹（1）--框架基礎類的設計和使用》
《基于SqlSugar的開發框架循序漸進介紹（2）-- 基于中間表的查詢處理》
《基于SqlSugar的開發框架循序漸進介紹（3）-- 實作代碼生成工具Database2Sharp的整合開發》
《基于SqlSugar的開發框架循序漸進介紹（4）-- 在資料訪問基類中對GUID主鍵進行自動賦值處理 》
《基于SqlSugar的開發框架循序漸進介紹（5）-- 在服務層使用介面注入方式實作IOC控制反轉》
《基于SqlSugar的開發框架循序漸進介紹（6）-- 在基類介面中注入用戶身份資訊介面 》
《基于SqlSugar的開發框架循序漸進介紹（7）-- 在檔案上傳模塊中采用選項模式【Options】處理常規上傳和FTP檔案上傳》
《基于SqlSugar的開發框架循序漸進介紹（8）-- 在基類函式封裝實作用戶操作日志記錄》
《基于SqlSugar的開發框架循序漸進介紹（9）-- 結合Winform控制元件實作欄位的權限控制》
《基于SqlSugar的開發框架循序漸進介紹（10）-- 利用axios組件的封裝，實作對后端API資料的訪問和基類的統一封裝處理》
《基于SqlSugar的開發框架循序漸進介紹（11）-- 使用TypeScript和Vue3的Setup語法糖撰寫頁面和組件的總結》
《基于SqlSugar的開發框架循序漸進介紹（12）-- 拆分頁面模塊內容為組件，實作分而治之的處理》
《基于SqlSugar的開發框架循序漸進介紹（13）-- 基于ElementPlus的上傳組件進行封裝，便于專案使用》
《基于SqlSugar的開發框架循序漸進介紹（14）-- 基于Vue3+TypeScript的全域物件的注入和使用》
《基于SqlSugar的開發框架循序漸進介紹（15）-- 整合代碼生成工具進行前端界面的生成》
《基于SqlSugar的開發框架循序漸進介紹（16）-- 作業流模塊的功能介紹》
《基于SqlSugar的開發框架循序漸進介紹（17）-- 基于CSRedis實作快取的處理》
《基于SqlSugar的開發框架循序漸進介紹（18）-- 基于代碼生成工具Database2Sharp，快速生成Vue3+TypeScript的前端界面和Winform端界面》
《基于SqlSugar的開發框架循序漸進介紹（19）-- 基于UniApp+Vue的移動前端的功能介紹》
《基于SqlSugar的開發框架循序漸進介紹（20）-- 在基于UniApp+Vue的移動端實作多條件查詢的處理》
《基于SqlSugar的開發框架循序漸進介紹（21）-- 在作業流串列頁面中增加一些轉義資訊的輸出，在后端進行內容轉換》
《基于SqlSugar的開發框架循序漸進介紹（22）-- Vue3+TypeScript的前端作業流模塊中實作統一的表單編輯和表單詳情查看處理 》
《基于SqlSugar的開發框架循序漸進介紹（23）-- Winform端管理系統中平滑增加對Web API對接的需求》
《基于SqlSugar的開發框架循序漸進介紹（24）-- 使用Serialize.Linq對Lambda運算式進行序列化和反序列化 》
基于SqlSugar的開發框架循序漸進介紹（25）-- 基于SignalR實作多端的訊息通訊
基于SqlSugar的開發框架循序漸進介紹（26）-- 實作本地上傳、FTP上傳、阿里云OSS上傳三者合一處理
專注于代碼生成工具、.Net/.NetCore 框架架構及軟體開發，以及各種Vue.js的前端技術應用，著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品， 轉載請注明出處：撰寫人：伍華聰 http://www.iqidi.com
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549688.html
標籤：其他
上一篇：CSS樣式中顏色與顏色值的應用