循序漸進VUE+Element 前端應用開發(23)--- 基於ABP實現前後端的附件上傳,圖片或者附件展示管理
在我們一般系統中,往往都會涉及到附件的處理,有時候附件是圖片檔案,有時候是Excel、Word等檔案,一般也就是可以分為圖片附件和其他附件了,圖片附件可以進行裁剪管理、多個圖片上傳管理,及圖片預覽操作,如果是其他附件,則只需上傳和下載處理即可。本篇隨筆基於ABP後端的介面整合,實現前後端的附件上傳管理。
1、ABP後端附件管理介面
ABP框架是基於最新.net core 的技術方向,應用非常廣泛的一個技術框架系列,它整合了很多.net core 領域相關開發技術,後端主要是釋出Web API方式實現資料和前端的互動的,因此前端可以基於Web API基礎上實現多種平臺的對接,可以是常規的BS框架,如Vue+Element 前端路線,也可以是Winform/WPF的前端框架接入等。
ABP+Swagger UI 負責API介面的開發和公佈,如下是附件上傳模組的API介面的管理介面。
ABP框架後端介面的常規處理,如增刪改查等介面命名都一致,引數方面也比較一致,而我們附件上傳,則可以自定義一個自己喜歡名稱的一個API介面名稱,如這裡定義一個PostUpload的方法,除了檔案資訊外,還包括一些引數來說明附件資訊的。上傳成功後,返回對應的路徑集合。
ABP後端定義的介面實現,我們為了獲得上下文物件的檔案物件資訊,我們在建構函式注入一個IHttpContextAccessor 物件。
/// <summary> /// 上傳附件資訊,應用層服務介面實現/// </summary> [AbpAuthorize] public class FileUploadAppService : MyAsyncServiceBase<FileUpload, FileUploadDto, string, FileUploadPagedDto, CreateFileUploadDto, FileUploadDto>, IFileUploadAppService { private AppConfig config = new AppConfig(); private readonly IRepository<FileUpload, string> _repository;//業務物件倉儲物件 private readonly IRepository<User, long> _userRepository;//使用者資訊倉儲物件 private IHttpContextAccessor _httpContext;//上下文物件 public FileUploadAppService(IRepository<FileUpload, string> repository, IRepository<User, long> userRepository, IHttpContextAccessor httpContext) : base(repository) { _repository = repository; _userRepository = userRepository; _httpContext = httpContext; }
在附件上傳處理的時候,我們就可以通過這樣獲得請求的檔案物件了,如下程式碼所示。
在後端上傳檔案的時候,和我其他開發框架,如Winform框架、混合開發框架、BS等框架一樣,我們後端為了方便,也可以使用FTP方式進行附件的上傳(這裡依舊是使用FluentFTP元件),如我們指定配置如下所示。
另外,在整合ABP後端介面的時候,我們為了方便,一般使用ES6的方式定義一個客戶端的Api呼叫類,基礎介面封裝在BaseApi類裡面,擴充套件自定義介面放在子類定義,如下所示。
另外,我們需要整合Api和介面部分實現完整的功能,那麼需要提供兩個部分:一個是Api類的繼承子類,一個是檢視介面的內容。如下所示包含Api封裝類檔案和Vue + Element介面檢視。
2、前端附件管理的實現
上傳圖片或者其他附件資訊,我們可以用Element元件裡面的el-Upload元件操作,這個控制元件基本上能夠滿足大多數的應用了,參考地址:https://element.eleme.cn/#/zh-CN/component/upload。
如下是其中的介面使用程式碼:
<el-form-item label="封面圖片"> <el-upload ref="upload" action="/abp/services/app/FileUpload/PostUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="onSuccess" :on-error="onError" accept="image/jpeg,image/gif,image/png,image/bmp" :headers="myHeaders" :file-list="editForm.fileList" > <i class="el-icon-plus" /> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item>
只是我們一般為了簡化處理,往往使用一些基於El-Upload元件之上封裝好的元件,更顯方便而已。
一般的圖片和附件上傳介面如下所示。
如我往往喜歡喜歡使用稍加封裝,程式碼量更少的一些第三方元件,如:
等這位仁兄的二次封裝的元件來做附件管理,可以更加簡潔一些。如下是使用的程式碼。
<el-row> <el-col :span="24"> <el-form-item label="圖片" prop="picture"> <ele-upload-image v-model="editForm.picture" :is-show-tip="false" :size="100" action="/abp/services/app/FileUpload/PostUpload" title="封面圖片" :headers="myHeaders" :data="{guid:editForm.id, folder:'使用者圖片'}" :crop="true" /> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="資料文件" prop="attachGUID"> <ele-upload-file v-model="editForm.attachGUID_files" :response-fn="handleAttachResponse" action="/abp/services/app/FileUpload/PostUpload" :headers="myHeaders" :data="{guid:editForm.attachGUID, folder:'使用者圖片'}" :before-remove="beforeRemoveAttach" /> </el-form-item> </el-col>
編輯介面下,附件上傳介面,可以載入已有的記錄展示,如下所示。
而附件列表我們通過呼叫ABP後端API即可獲取,然後進行繫結即可。
// 獲取附件檔案列表 param = { guid: this.editForm.attachGUID } fileupload.GetByAttachGUID(param).then(data => { if (data.result) { this.editForm.attachGUID_files = [...data.result] } })
附件上傳的操作,我們一般需要通過設定Header方式,來傳遞使用者的身份資訊,如下data部分的程式碼
myHeaders: { Authorization: 'Bearer ' + getToken() }, // 用於上傳檔案的身份認證
而其中的介面元件中的data,是指定額外上傳的檔案附帶資訊,方便我們區分或者歸類檔案的。
附件列表,如果需要刪除的,那麼我們提示確認後,需要呼叫ABP後端API進行刪除檔案。
beforeRemoveAttach(file, fileList) { // 移除附件圖片 // 服務端刪除檔案 var param = { guid: this.editForm.attachGUID, index: fileList.indexOf(file) } fileupload.RemoveAttach(param).then(data => { console.log(data.result) }) },
另外,如果確認附件是全部圖片,我們也可以用圖片列表控制元件的方式展示圖片資訊,如下所示。