基于sqlsugar的开发框架循序渐进介绍（13）-凯发真人娱乐

在我们实际项目开发过程中，往往需要根据实际情况，对进行，以更简便的在界面代码中使用，在实际的前端应用中，适当的组件封装，可以减少很多重复的界面代码，并且能够非常简便的使用，本篇随笔介绍基于elementplus的上传组件进行封装。

1、el-upload上传组件的使用场景及数据库设计

在凯发真人娱乐官网地址https://element-plus.org/zh-cn/component/upload.html上有关于该组件的详细使用代码案例。

大概有个场景我需要根据需要展示文件的，一个是文件展示方式（非图片格式）。

一种是肖像方式处理。

一种方式是图片缩略图列表方式。

还有就是支持拖动方式上传。

我目前大概就是想到应用这几种方式，细节的地方可以根据需要进行微调即可。

一般来说，我们附件信息是单独存储在一个表里面的，附件则是存储在相应的文件系统或者ftp目录中。如果需要了解后端不同方式的文件上传方式，可以了解随笔《基于sqlsugar的开发框架循序渐进介绍（7）-- 在文件上传模块中采用选项模式【options】处理常规上传和ftp文件上传》

而实际我们业务表里面，只需要存在一个字符串字段，它是一串guid的值，用于引用单个或者多个附件列表的attahmentguid值即可。

在前端界面使用的的时候，我则希望自定义的组件使用的时候，尽量简单，因此对于附件上传的url地址、upload组件的相关设置，应该屏蔽在自定义组件即可，组件只需要提供一个v-model的绑定值和一些需要的属性即可。

2、文件上传后端处理

在介绍前端上传组件自定义前，我们需要提供一个上传文件的url地址给前端，接收前端的文件流，以及相关formdata里面的参数值。

后端上传处理的函数定义如下所示

        /// 


        /// 多文件上传处理（自动根据配置文件选择合适的上传方式）

        /// 


        /// 附件组guid

        /// 指定的上传目录

        /// 

        [requestsizelimit(100000000)] //请求正文最大大小100m

        [httppost]

        [route("postupload")]

        public async task> postupload()

其中 responsefileinfo 是我们定义一个返回给前端使用的对象，记录文件的名称、url，id信息。

    /// 


    /// 上传后文件返回的结果信息

    /// 


    public class responsefileinfo

    {

        /// 


        /// 默认构造函数

        /// 


        public responsefileinfo() { }
        /// 


        /// 参数化构造函数

        /// 


        /// 

        /// 

        /// 

        public responsefileinfo(string id, string name, string url)

        {

            this.id = id;

            this.name = name;

            this.url = url;

        }
        /// 


        /// 记录id

        /// 


        public string id { get; set; }

        /// 


        /// 文件名称

        /// 
        public string name { get; set; }
        /// 


        /// 文件路径

        /// 


        public string url { get; set; }

    }

在后端上传处理中，我们可以通过http上下文获得传过来的对应参数和文件列表信息，如下代码所示。

        public async task> postupload()

        {

            var httpcontext = this.httpcontext;

            string guid = httpcontext.request.form["guid"];//input.guid;

            string folder = httpcontext.request.form["folder"];//input.folder;

            var files = httpcontext.request.form.files;

最后根据文件信息和相关参数，构建附件数据库信息，以及存储文件就可以了，如下代码所示。

3、文件上传组件的前端封装和处理

对于编辑状态下的前端处理，我们只需要绑定v-model的值，以及指定的一些参数就可以了。

如果是禁止上传的详细展示，可以设置disabled属性为true就可以了

        disabled />

 

用户界面展示如下所示。

通过简单的封装，我们就可以在极少代码的基础上定制自己的功能界面了。易于阅读和维护，同时也有助于我们后面通过代码生成工具的方式快速生成相关的代码。

自定义组件，我们根据需要定义一些属性，并对它设置默认值，如下所示代码。