[Abp vNext微服務實踐] - 搭建文件存儲服務

一、簡介

通過往期的系列文章，我們已經完成了基於ABP框架的授權、基礎服務、Business、網關的搭建，並且基於vue-element-admin框架完成了ABP權限管理基礎功能和一些常用的后台管理業務功能。本篇文章將持續往期系列，在ABP-MicroService框架中搭建文件存儲服務。

二、FileStorage項目搭建

關於手動搭建ABP空模塊項目在往期系列文章和《從0到1搭建ABP微服務系列》中有非常詳細的介紹，這里就暫時省略。

三、存儲模式

對於小文件(小於100M)存儲可以使用靜態文件和數據庫兩種方式。這兩種方式各有優勢，靜態文件讀取速度快、適應場景多，但靜態文件路徑是公共的，所以比較適合C端系統，或者僅能內網訪問的系統。數據庫存儲更加易於管理，而且二進制存儲更加節省空間和保密。

靜態文件存儲

.net core中靜態文件管理非常方便，只需放在在Host項目的wwwroot文件下就可以輕松管理，如果沒有wwwroot文件夾需要創建。

添加UploadController

在Host項目下創建添加UploadController並添加Upload路由作為文件上傳入口，上傳接口使用的是.net core官方推薦的IFormFile：

        public async Task<ActionResult> Upload([Required]string name, IFormFile file)
        {
            string uniqueFileName = null;

            if (file != null)
            {
                //限制100M
                if (file.Length > 104857600)
                {
                    return new BadRequestObjectResult("上傳文件過大");
                }
                //文件格式
                var fileExtension = Path.GetExtension(file.FileName);
                if (!pictureFormatArray.Contains(fileExtension))
                {
                    return new BadRequestObjectResult("上傳文件格式錯誤");
                }

                var size = "";
                if (file.Length < 1024)
                    size = file.Length.ToString() + "B";
                else if (file.Length >= 1024 && file.Length < 1048576)
                    size = ((float)file.Length / 1024).ToString("F2") + "KB";
                else if (file.Length >= 1048576 && file.Length < 104857600)
                    size = ((float)file.Length / 1024 / 1024).ToString("F2") + "MB";
                else size = file.Length.ToString() + "B";

                string uploadsFolder = Path.Combine(_hostEnvironment.WebRootPath, "Images");
                if (!Directory.Exists(uploadsFolder))
                {
                    Directory.CreateDirectory(uploadsFolder);
                }

                uniqueFileName = Guid.NewGuid().ToString() + fileExtension;
                string filePath = Path.Combine(uploadsFolder, uniqueFileName);
                using (var fileStream = new FileStream(filePath, FileMode.Create))
                {
                    file.CopyTo(fileStream);
                    fileStream.Flush();
                }

                //TODO：文件md5哈希校驗
                await _fileManager.Create(name, uniqueFileName, fileExtension, "", size, filePath, "/Images/" + uniqueFileName, FileType.Image);
            }
            return Ok(uniqueFileName);
        }

從代碼中可以看出文件上傳邏輯非常簡單，在文件上傳成功后將文件信息保存到數據庫中就可以輕松實現文件的管理。

接口測試

啟動項目自動跳轉swagger進行接口測試

vue上傳

使用element-ui組件上傳，代碼如下：

<el-form-item label="上傳">
          <el-upload
            ref="upload"
            :limit="1"
            :before-upload="beforeUpload"
            :auto-upload="false"
            :on-success="handleSuccess"
            :on-error="handleError"
            :action="storageApi + '/upload?name=' + form.name"
          >
            <div class="upload">
              <i class="el-icon-upload" /> 添加文件
            </div>
            <div slot="tip" class="el-upload__tip">可上傳任意格式文件，且不超過100M</div>
          </el-upload>
</el-form-item>

// 上傳文件
    upload() {
      this.$refs.upload.submit();
    },
    beforeUpload(file) {
      let isLt2M = true;
      isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.loading = false;
        this.$message.error("上傳文件大小不能超過 100MB!");
      }
      this.form.name = file.name;
      return isLt2M;
    },
    handleSuccess(response, file, fileList) {
      this.$notify({
        title: "成功",
        message: "更新成功",
        type: "success",
        duration: 2000,
      });
      this.dialogFormVisible = false;
      this.getList();
    },
    // 監聽上傳失敗
    handleError(e, file, fileList) {
      this.$notify({
        title: e,
        type: "error",
        duration: 4000,
      });
      this.loading = false;
    },

效果預覽

數據庫Blob存儲

敬請期待！

代碼地址：https://github.com/WilliamXu96/ABP-MicroService
文章目錄：https://www.cnblogs.com/william-xu/p/12047529.html