循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理

转载 原文作者： 伍华聪 原文地址：https://www.cnblogs.com/wuhuacong/p/14035237.html

在我们很多模块里面，都需要使用到一些诸如图片、Excel 文件、PDF 文件等附件的管理，一般我们倾向于把它独立为一个公用的附件管理模块，这样可以有效的统一管理附件的信息。本篇随笔介绍附件内容的管理，包括可以对图片进行预览，对其他文件实现信息的查看和下载等操作，以及后端提供对应的附件上传等处理。

1、附件管理的界面

和其他模块一样，我们可以对附件记录表里面的信息进行管理，一般情况下，我们管理的附件都是诸如图片、Excel 文件、PDF 文件等附件的管理。

附件表是一个综合管理这些文件的记录表，虽然附件一般是独立上传到服务器端的文件系统里面，不过也需要记录这些文件的名称、类别名称、大小、后缀名、创建时间、创建人等信息。

数据库设计表如下所示。

记录明细大概如下所示。

为了管理好这些文件信息，我们在界面提供一些条件供查询，如下是管理界面。

为了快速的进行检索，我们提供了两个树形列表进行查询，可以按照文件类型，以及按照类别名称查询，类别是我们在上传的时候指定的一个附件的类别名称。

按文件类型分类如下所示

按类别名称分类如下所示。

而树形列表的信息展示，我们使用了自定义的树列表控件，非常方便，并极大减少了界面代码，界面代码如下所示。

<el-tabs value="treeType" type="border-card">
  <el-tab-pane > <myTree :data="treeType" icon-class="el-icon-price-tag" @nodeClick="nodeTypeClick" />
  </el-tab-pane>
  <el-tab-pane > <myTree :data="treeCategory" icon-class="el-icon-price-tag" @nodeClick="nodeCategoryClick" />
  </el-tab-pane>
</el-tabs>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

而树形列表的类别名称，我们是从数据库中动态获取的，因此需要特殊的 API 封装调用。

在 ABP 框架的后端，应用服务类 FileUploadAppService 中定义一个获取类别的列表接口

/// <summary> /// 获取所有类别(Distinct) /// </summary> /// <returns></returns> public virtual async Task<List<string>> GetAllCategory() { var query = Repository.GetAll().Where(s=> s.Category != null).OrderBy(s => s.Category); var list = query.Select(s => s.Category).Distinct().ToList(); return await Task.FromResult(list); }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

在客户端的 API 调用类中同时增加一个 API 处理接口，如下所示。

而 Element 的前端调用后端的 ABP 接口，前面很多博客也介绍的很多了，如下是它们的处理过程图示。

前端根据 ABP 后端的接口进行前端 JS 端的类的封装处理，引入了 ES6 类的概念实现业务基类接口的统一封装，简化代码。

大多数模块我们涉及到常规增删改查等业务接口，那么这些类继承 BaseApi，就会具有相关的接口了，如下所示继承关系。

其中 JS 类的 BaseApi 具有常规的增删改查接口，如下所示。

在整合 ABP 后端接口的时候，我们为了方便，一般使用 ES6 的方式定义一个客户端的 Api 调用类，基础接口封装在 BaseApi 类里面，扩展自定义接口放在子类定义，因此前端 API 封装类 fileupload.js 的类关系如下所示。

我们再次回到管理界面，在列表中展示附件信息外，如果是图片提供预览，如果是文件则提供下载链接，方便处理。

或者

预览查看图片文件的时候，我们也需要在明细中列出附件的一些信息，如下界面所示。

以上就是附件管理的设计表，以及管理界面，其中前端主要使用了 Vue + Element 进行开发，后端还是用 ABP 的框架提供相关的 API 接口。

2、附件上传的处理

在之前随笔《循序渐进 VUE+Element 前端应用开发 (23）— 基于 ABP 实现前后端的附件上传，图片或者附件展示管理》中已经比较详细的介绍了对附件的上传处理，我们 ABP 后端提供了一些 API 接口给前端界面控件进行调用即可上传对应的附件

在附件上传处理的时候，我们就可以通过这样获得请求的文件对象了，如下代码所示。

我们上传到后端 ABP 应用服务器的文件，一般情况是不能访问目录的，如果需要特别放行，那么需要在 ABP 服务的 Host 应用里面，设置静态文件，允许前端访问我们的文件路径。

一般在 Host 项目的启动入口设置即可。

public void Configure(IApplicationBuilder app, ILoggerFactory loggerFactory) { ............ app.UseStaticFiles(); //指定特定的目录作为静态文件目录，如UploadFiles //是否可以访问静态文件 app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider(Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, "UploadFiles")), RequestPath = "/UploadFiles" }); .........

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

这样上传的文件，在对应目录里面，就可以通过 URL 地址访问了。

另外，前面我们看到的数据记录里面，没有绝对的 URL 地址，一般是为了适应性方便，不需要绝对的地址。

但是前端为了方便，服务器后端返回的接口中，我们一般增加一个绝对的地址信息供查看或者下载文件，那么我们可以在后端对应附件记录的转义函数里面增加一个对相对地址转换为绝对访问的 URL 地址的转换即可。

/// <summary> /// 对记录进行转义 /// </summary> /// <param >dto数据对象</param> /// <returns></returns> protected override void ConvertDto(FileUploadDto item) { //转义相对地址为绝对地址 item.FileUrl = GetFileUrl(item.BasePath, item.SavePath); }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

/// <summary> /// 根据记录的basePath和savePath，以及HttpContext上下文确定绝对路径 /// </summary> /// <param >附件的基础路径</param> /// <param >附件的保存路径</param> /// <returns></returns> private string GetFileUrl(string basePath, string savePath) { var httpContext = \_httpContext.HttpContext; string serverRealPath = basePath.UriCombine(savePath); if (!Path.IsPathRooted(basePath) && !basePath.StartsWith("http://") && !basePath.StartsWith("https://")) { //如果是相对目录，加上当前程序的目录才能定位文件地址 var url = string.Format("{0}://{1}", httpContext.Request.Scheme, httpContext.Request.Host.Value); serverRealPath = url.UriCombine(serverRealPath).Replace('\\\\', '/'); } return serverRealPath; }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

而前端界面中，一般的图片和附件上传界面如下所示。

编辑界面下，附件上传界面，可以加载已有的记录展示，如下所示。

用图片列表控件的方式展示图片信息，如下所示。

如果我们用 Element 的上传组件，大概的界面代码如下所示，主要设置好上传的 API 地址，以及给它提供好对应的授权头部信息即可。

前端界面的代码如下所示。

<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 /> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

其中授权头部信息，是 ABP 约定的授权请求头部信息，如下属性设置

myHeaders: { Authorization: 'Bearer ' + getToken() }, // 用于上传文件的身份认证

  

 

  
1
 

这样就可以整合文件上传的管理操作了，而前端就只需要针对附件信息，做统一的管理即可。

如下是统一的附件管理界面入口。

文章来源: blog.csdn.net，作者：三分恶，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/sinat_40770656/article/details/110139217