按部就班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处理各类图表展现