循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

在后端上传文件的时候，和我其他开发框架，如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。

如下是其中的界面使用代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

只是我们一般为了简化处理，往往使用一些基于El-Upload组件之上封装好的组件，更显方便而已。

一般的图片和附件上传界面如下所示。

如我往往喜欢喜欢使用稍加封装，代码量更少的一些第三方组件，如：

dream2023/vue-ele-upload-image

dream2023/vue-ele-upload-file

等这位仁兄的二次封装的组件来做附件管理，可以更加简洁一些。如下是使用的代码。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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

而附件列表我们通过调用ABP后端API即可获取，然后进行绑定即可。

// 获取附件文件列表 param = { guid: this.editForm.attachGUID } fileupload.GetByAttachGUID(param).then(data => { if (data.result) { this.editForm.attachGUID_files = [...data.result] } })

1

2

3

4

5

6

7

附件上传的操作，我们一般需要通过设置Header方式，来传递用户的身份信息，如下data部分的代码:

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

1

而其中的界面组件中的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) }) },

1

2

3

4

5

6

7

另外，如果确认附件是全部图片，我们也可以用图片列表控件的方式展示图片信息，如下所示。

Vue web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。