在我們一般系統中，往往都會涉及到附件的處理，有時候附件是圖片檔案，有時候是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組件之上封裝好的組件，更顯方便而已，
一般的圖片和附件上傳界面如下所示，
如我往往喜歡喜歡使用稍加封裝，代碼量更少的一些第三方組件，如：
dream2023/vue-ele-upload-image
dream2023/vue-ele-upload-file
等這位仁兄的二次封裝的組件來做附件管理，可以更加簡潔一些，如下是使用的代碼，
<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)
})
},
另外，如果確認附件是全部圖片，我們也可以用圖片串列控制元件的方式展示圖片資訊，如下所示，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/194174.html
標籤：JavaScript