循序漸進VUE+Element 前端應(yīng)用開發(fā)(23）--- 基于ABP實現(xiàn)前后端的附件上傳，圖片或者附件展示管理

Coder編程 2021-09-09

展開全文

在我們一般系統(tǒng)中，往往都會涉及到附件的處理，有時候附件是圖片文件，有時候是Excel、Word等文件，一般也就是可以分為圖片附件和其他附件了，圖片附件可以進行裁剪管理、多個圖片上傳管理，及圖片預(yù)覽操作，如果是其他附件，則只需上傳和下載處理即可。本篇隨筆基于ABP后端的接口整合，實現(xiàn)前后端的附件上傳管理。

1、ABP后端附件管理接口

ABP框架是基于最新.net core 的技術(shù)方向，應(yīng)用非常廣泛的一個技術(shù)框架系列，它整合了很多.net core 領(lǐng)域相關(guān)開發(fā)技術(shù)，后端主要是發(fā)布Web API方式實現(xiàn)數(shù)據(jù)和前端的交互的，因此前端可以基于Web API基礎(chǔ)上實現(xiàn)多種平臺的對接，可以是常規(guī)的BS框架，如Vue+Element 前端路線，也可以是Winform/WPF的前端框架接入等。

ABP+Swagger UI 負責(zé)API接口的開發(fā)和公布，如下是附件上傳模塊的API接口的管理界面。

ABP框架后端接口的常規(guī)處理，如增刪改查等接口命名都一致，參數(shù)方面也比較一致，而我們附件上傳，則可以自定義一個自己喜歡名稱的一個API接口名稱，如這里定義一個PostUpload的方法，除了文件信息外，還包括一些參數(shù)來說明附件信息的。上傳成功后，返回對應(yīng)的路徑集合。

ABP后端定義的接口實現(xiàn)，我們?yōu)榱双@得上下文對象的文件對象信息，我們在構(gòu)造函數(shù)注入一個IHttpContextAccessor 對象。

    /// <summary>
    /// 上傳附件信息，應(yīng)用層服務(wù)接口實現(xiàn)
    /// </summary>
    [AbpAuthorize]
    public class FileUploadAppService : MyAsyncServiceBase<FileUpload, FileUploadDto, string, FileUploadPagedDto, CreateFileUploadDto, FileUploadDto>, IFileUploadAppService
    {
        private AppConfig config = new AppConfig();
        private readonly IRepository<FileUpload, string> _repository;//業(yè)務(wù)對象倉儲對象
        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;
        }

在附件上傳處理的時候，我們就可以通過這樣獲得請求的文件對象了，如下代碼所示。

在后端上傳文件的時候，和我其他開發(fā)框架，如Winform框架、混合開發(fā)框架、BS等框架一樣，我們后端為了方便，也可以使用FTP方式進行附件的上傳（這里依舊是使用FluentFTP組件），如我們指定配置如下所示。

另外，在整合ABP后端接口的時候，我們?yōu)榱朔奖?，一般使用ES6的方式定義一個客戶端的Api調(diào)用類，基礎(chǔ)接口封裝在BaseApi類里面，擴展自定義接口放在子類定義，如下所示。

另外，我們需要整合Api和界面部分實現(xiàn)完整的功能，那么需要提供兩個部分：一個是Api類的繼承子類，一個是視圖界面的內(nèi)容。如下所示包含Api封裝類文件和Vue + Element界面視圖。

2、前端附件管理的實現(xiàn)

上傳圖片或者其他附件信息，我們可以用Element組件里面的el-Upload組件操作，這個控件基本上能夠滿足大多數(shù)的應(yīng)用了，參考地址：https://element./#/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>

編輯界面下，附件上傳界面，可以加載已有的記錄展示，如下所示。

而附件列表我們通過調(diào)用ABP后端API即可獲取，然后進行綁定即可。

// 獲取附件文件列表
param = { guid: this.editForm.attachGUID }
fileupload.GetByAttachGUID(param).then(data => {
  if (data.result) {
    this.editForm.attachGUID_files = [...data.result]
  }
})

附件上傳的操作，我們一般需要通過設(shè)置Header方式，來傳遞用戶的身份信息，如下data部分的代碼

  myHeaders: { Authorization: 'Bearer ' + getToken() }, // 用于上傳文件的身份認(rèn)證

而其中的界面組件中的data，是指定額外上傳的文件附帶信息，方便我們區(qū)分或者歸類文件的。

附件列表，如果需要刪除的，那么我們提示確認(rèn)后，需要調(diào)用ABP后端API進行刪除文件。

    beforeRemoveAttach(file, fileList) { // 移除附件圖片
      // 服務(wù)端刪除文件
      var param = { guid: this.editForm.attachGUID, index: fileList.indexOf(file) }
      fileupload.RemoveAttach(param).then(data => {
        console.log(data.result)
      })
    },

另外，如果確認(rèn)附件是全部圖片，我們也可以用圖片列表控件的方式展示圖片信息，如下所示。

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

循序漸進VUE+Element 前端應(yīng)用開發(fā)(1）--- 開發(fā)環(huán)境的準(zhǔn)備工作

循序漸進VUE+Element 前端應(yīng)用開發(fā)(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應(yīng)用開發(fā)(3）--- 動態(tài)菜單和路由的關(guān)聯(lián)處理

循序漸進VUE+Element 前端應(yīng)用開發(fā)(4）--- 獲取后端數(shù)據(jù)及產(chǎn)品信息頁面的處理

循序漸進VUE+Element 前端應(yīng)用開發(fā)(5）--- 表格列表頁面的查詢，列表展示和字段轉(zhuǎn)義處理

循序漸進VUE+Element 前端應(yīng)用開發(fā)(6）--- 常規(guī)Element 界面組件的使用

循序漸進VUE+Element 前端應(yīng)用開發(fā)(7）--- 介紹一些常規(guī)的JS處理函數(shù)

循序漸進VUE+Element 前端應(yīng)用開發(fā)(8）--- 樹列表組件的使用

循序漸進VUE+Element 前端應(yīng)用開發(fā)(9）--- 界面語言國際化的處理

循序漸進VUE+Element 前端應(yīng)用開發(fā)(10）--- 基于vue-echarts處理各種圖表展示