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

????? ? 文件管理功能是基于Vue和Element，所以只有在BeetleX.WebFamily中使用Vue和Element模板才能集成這一功能。通過(guò)以下代碼來(lái)啟動(dòng)BeetleX.WebFamily服務(wù)應(yīng)用。

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();}}

以上代碼把文件管理組件設(shè)置為主頁(yè)面，啟動(dòng)后直接可以通過(guò)瀏覽器進(jìn)行訪(fǎng)問(wèn).

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

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

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

????????文件管理默認(rèn)是沒(méi)有權(quán)限控制，可以通過(guò)啟用BeetleX.WebFamily的jwt功能來(lái)控制處理權(quán)限。當(dāng)存在驗(yàn)證信息后文件存儲(chǔ)會(huì)根據(jù)每個(gè)用戶(hù)進(jìn)行單獨(dú)目錄劃分處理。

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(); }

完整示例可以訪(fǎng)問(wèn):

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

BeetleX

開(kāi)源跨平臺(tái)通訊框架(支持TLS)
提供高性能服務(wù)和大數(shù)據(jù)處理解決方案

https://beetlex.io

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。