循序漸進VUE+Element 前端應用開發(23）--- 基於ABP實現前后端的附件上傳，圖片或者附件展示管理

本文轉載自查看原文 2020-10-27 15:19 1601 ABP框架使用/ 循序漸進VUE+Element

在我們一般系統中，往往都會涉及到附件的處理，有時候附件是圖片文件，有時候是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)
      })
    },

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