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

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

&n