??????? BeetleX.WebFamily在2.4.8版本中集文件管理功能，通過這一功能可以不寫任何代碼的情況即可集成文件和圖片的上傳管理功能。接下來詳細介紹下如何引入這一功能組件。

????? ? 文件管理功能是基于Vue和Element，所以只有在BeetleX.WebFamily中使用Vue和Element模板才能集成這一功能。通過以下代碼來啟動BeetleX.WebFamily服務應用。

class?Program {static void Main(string[] args){WebHost host = new WebHost();WebHost.HomeModel = "webfamily-files";host.Setting(o =>{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;}).UseFileManager(o =>{o.MaxSize = 1024 * 1024 * 1024;}).UseElement(PageStyle.Element).Initialize((http, vue, resoure) =>{vue.Debug();}).Run();}}

以上代碼把文件管理組件設置為主頁面，啟動后直接可以通過瀏覽器進行訪問.

組件支持切換顯示模式，包括有文件列表和圖片預覽模式。最大上傳文件大小可以根據自己的需求來配置，由于基本分塊的方式進行上傳所以可以支持GB或更大的文件上傳。

????????文件管理以一個Vue組件的方式提供集成，控件名是<webfamily-files></webfamily-files>可以在任何地方引入這個控件，可以通過select事件來得到選擇附件的信息。

<div id="app"><webfamily-files??@select="console.log($event)"></webfamily-files></div>

????????文件管理默認是沒有權限控制，可以通過啟用BeetleX.WebFamily的jwt功能來控制處理權限。當存在驗證信息后文件存儲會根據每個用戶進行單獨目錄劃分處理。

static void Main(string[] args) {WebHost host = new WebHost();WebHost.HomeModel = "webfamily-files";WebHost.Login = true;host.Setting(o =>{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;}).UseJWT().UseFileManager(o =>{o.MaxSize = 1024 * 1024 * 1024;}).UseElement(PageStyle.Element).Initialize((http, vue, resoure) =>{vue.Debug();}).Run(); }

完整示例可以訪問:

https://github.com/beetlex-io/BeetleX-Samples/tree/master/BeetleX.Samples.WebFamily.FileUpload

BeetleX

開源跨平臺通訊框架(支持TLS)
提供高性能服務和大數據處理解決方案

https://beetlex.io

總結

以上是生活随笔為你收集整理的BeetleX.WebFamily文件图片管理集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。