HTTP 狀態(tài)消息
844
2025-04-06
循序漸進VUE+Element 前端應用開發(fā)(23）--- 基于ABP實現前后端的附件上傳，圖片或者附件展示管理
文章目錄
1、ABP后端附件管理接口
2、前端附件管理的實現
在我們一般系統(tǒng)中，往往都會涉及到附件的處理，有時候附件是圖片文件，有時候是Excel、Word等文件，一般也就是可以分為圖片附件和其他附件了，圖片附件可以進行裁剪管理、多個圖片上傳管理，及圖片預覽操作，如果是其他附件，則只需上傳和下載處理即可。本篇隨筆基于ABP后端的接口整合，實現前后端的附件上傳管理。
1、ABP后端附件管理接口
ABP框架是基于最新.net core 的技術方向，應用非常廣泛的一個技術框架系列，它整合了很多.net core 領域相關開發(fā)技術，后端主要是發(fā)布Web API方式實現數據和前端的交互的，因此前端可以基于Web API基礎上實現多種平臺的對接，可以是常規(guī)的BS框架，如Vue+Element 前端路線，也可以是Winform/WPF的前端框架接入等。
ABP+Swagger UI 負責API接口的開發(fā)和公布，如下是附件上傳模塊的API接口的管理界面。
ABP框架后端接口的常規(guī)處理，如增刪改查等接口命名都一致，參數方面也比較一致，而我們附件上傳，則可以自定義一個自己喜歡名稱的一個API接口名稱，如這里定義一個PostUpload的方法，除了文件信息外，還包括一些參數來說明附件信息的。上傳成功后，返回對應的路徑集合。
ABP后端定義的接口實現，我們?yōu)榱双@得上下文對象的文件對象信息，我們在構造函數注入一個IHttpContextAccessor 對象。
///
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在附件上傳處理的時候，我們就可以通過這樣獲得請求的文件對象了，如下代碼所示。
在后端上傳文件的時候，和我其他開發(fā)框架，如Winform框架、混合開發(fā)框架、BS等框架一樣，我們后端為了方便，也可以使用FTP方式進行附件的上傳（這里依舊是使用FluentFTP組件），如我們指定配置如下所示。
另外，在整合ABP后端接口的時候，我們?yōu)榱朔奖悖话闶褂肊S6的方式定義一個客戶端的Api調用類，基礎接口封裝在BaseApi類里面，擴展自定義接口放在子類定義，如下所示。
另外，我們需要整合Api和界面部分實現完整的功能，那么需要提供兩個部分：一個是Api類的繼承子類，一個是視圖界面的內容。如下所示包含Api封裝類文件和Vue + Element界面視圖。
2、前端附件管理的實現
上傳圖片或者其他附件信息，我們可以用Element組件里面的el-Upload組件操作，這個控件基本上能夠滿足大多數的應用了，參考地址：https://element.eleme.cn/#/zh-CN/component/upload。
如下是其中的界面使用代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
只是我們一般為了簡化處理，往往使用一些基于El-Upload組件之上封裝好的組件，更顯方便而已。
一般的圖片和附件上傳界面如下所示。
如我往往喜歡喜歡使用稍加封裝，代碼量更少的一些第三方組件，如：
dream2023/vue-ele-upload-image
dream2023/vue-ele-upload-file
等這位仁兄的二次封裝的組件來做附件管理，可以更加簡潔一些。如下是使用的代碼。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
編輯界面下，附件上傳界面，可以加載已有的記錄展示，如下所示。
而附件列表我們通過調用ABP后端API即可獲取，然后進行綁定即可。
// 獲取附件文件列表 param = { guid: this.editForm.attachGUID } fileupload.GetByAttachGUID(param).then(data => { if (data.result) { this.editForm.attachGUID_files = [...data.result] } })
1
2
3
4
5
6
7
附件上傳的操作，我們一般需要通過設置Header方式，來傳遞用戶的身份信息，如下data部分的代碼:
myHeaders: { Authorization: 'Bearer ' + getToken() }, // 用于上傳文件的身份認證
1
而其中的界面組件中的data，是指定額外上傳的文件附帶信息，方便我們區(qū)分或者歸類文件的。
附件列表，如果需要刪除的，那么我們提示確認后，需要調用ABP后端API進行刪除文件。
beforeRemoveAttach(file, fileList) { // 移除附件圖片 // 服務端刪除文件 var param = { guid: this.editForm.attachGUID, index: fileList.indexOf(file) } fileupload.RemoveAttach(param).then(data => { console.log(data.result) }) },
1
2
3
4
5
6
7
另外，如果確認附件是全部圖片，我們也可以用圖片列表控件的方式展示圖片信息，如下所示。
Vue web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
