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

大多数模块我们涉及到常规增删改查等业务接口，那么这些类继承 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”

});

…

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

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

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

///

/// 对记录进行转义

///

/// dto数据对象

///

protected override void ConvertDto(FileUploadDto item)

{

//转义相对地址为绝对地址

item.FileUrl = GetFileUrl(item.BasePath, item.SavePath);

}

///

/// 根据记录的basePath和savePath，以及HttpContext上下文确定绝对路径

///

/// 附件的基础路径

/// 附件的保存路径

///

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;

}

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

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

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

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

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

<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”

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

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】