按部就班VUE+Element 前端應用開發(23）--- 基於ABP實現先後端的附件上傳，圖片或者附件展現管理

時間 2020-11-12

標籤 html 前端 vue git github 後端前端框架 app echarts 框架欄目 HTML 简体版

原文原文鏈接

在咱們通常系統中，每每都會涉及到附件的處理，有時候附件是圖片文件，有時候是Excel、Word等文件，通常也就是能夠分爲圖片附件和其餘附件了，圖片附件能夠進行裁剪管理、多個圖片上傳管理，及圖片預覽操做，若是是其餘附件，則只需上傳和下載處理便可。本篇隨筆基於ABP後端的接口整合，實現先後端的附件上傳管理。html

一、ABP後端附件管理接口

ABP框架是基於最新.net core 的技術方向，應用很是普遍的一個技術框架系列，它整合了不少.net core 領域相關開發技術，後端主要是發佈Web API方式實現數據和前端的交互的，所以前端能夠基於Web API基礎上實現多種平臺的對接，能夠是常規的BS框架，如Vue+Element 前端路線，也能夠是Winform/WPF的前端框架接入等。前端

ABP+Swagger UI 負責API接口的開發和公佈，以下是附件上傳模塊的API接口的管理界面。vue

ABP框架後端接口的常規處理，如增刪改查等接口命名都一致，參數方面也比較一致，而咱們附件上傳，則能夠自定義一個本身喜歡名稱的一個API接口名稱，如這裏定義一個PostUpload的方法，除了文件信息外，還包括一些參數來講明附件信息的。上傳成功後，返回對應的路徑集合。git

ABP後端定義的接口實現，咱們爲了得到上下文對象的文件對象信息，咱們在構造函數注入一個IHttpContextAccessor 對象。github

    /// <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類裏面，擴展自定義接口放在子類定義，以下所示。app

另外，咱們須要整合Api和界面部分實現完整的功能，那麼須要提供兩個部分：一個是Api類的繼承子類，一個是視圖界面的內容。以下所示包含Api封裝類文件和Vue + Element界面視圖。echarts

二、前端附件管理的實現

上傳圖片或者其餘附件信息，咱們能夠用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)
      })
    },

另外，若是確認附件是所有圖片，咱們也能夠用圖片列表控件的方式展現圖片信息，以下所示。

爲了方便讀者理解，我列出一下前面幾篇隨筆的鏈接，供參考：

按部就班VUE+Element 前端應用開發(1）--- 開發環境的準備工做

按部就班VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理

按部就班VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理

按部就班VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展現和字段轉義處理

按部就班VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

按部就班VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函數

按部就班VUE+Element 前端應用開發(8）--- 樹列表組件的使用

按部就班VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

按部就班VUE+Element 前端應用開發(10）--- 基於vue-echarts處理各類圖表展現