简介

PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管理端只有Html+js版本的，后续将支持小程序，Vue等

案例源码

案例源码在

https://gitee.com/pastecode/paste-template

不定期升级

AllInDto!

通过引入PasteForm，一个项目哪怕100个数据表，一般的管理页面也才不到10个，除非有非常多的特殊功能，否则都能用PasteForm中的表格和表单来实现！

本次的特性介绍，涉及的东西会多一些，你可以下载源码后，看看详细的，我们先来查看下各个特性的信息

file

其实可以使用image的接口，他们2个的返回格式都是一样的，wangEditor的返回格式，主要是UI上不一样，毕竟文件没法预览

案例的Dto

    /// <summary>
    /// 上传文件案例
    /// </summary>
    public class FileModel
    {

        ///<summary>
        ///姓名 模拟短文本输入
        ///</summary>
        [MaxLength(32)]
        [Required]
        public string Name { get; set; }

        ///<summary>
        ///文本区域 模拟文本区域的输入
        ///</summary>
        [MaxLength(128)]
        public string Desc { get; set; }

        ///<summary>
        ///文本区域 长度大于128则自动为textarea
        ///</summary>
        [MaxLength(256)]
        public string Text { get; set; }

        /// <summary>
        /// 文件1 默认配置，使用默认的路径上传
        /// </summary>
        [ColumnDataType("file")]
        public string File1 { get; set; } = "";

        /// <summary>
        /// 文件2 定义存储路径
        /// </summary>
        [ColumnDataType("file", "", "xpath")]
        public string File2 { get; set; } = "";

        /// <summary>
        /// 文件3 自定义上传地址,注意headers
        /// </summary>
        [ColumnDataType("file", "/api/app/Upload/UpFile?type=abc")]
        public string File3 { get; set; } = "";

        /// <summary>
        /// 文件4 自定义onchange函数
        /// </summary>
        [ColumnDataType("file", "", "", "funcUploadFile(this);")]
        public string File4 { get; set; } = "";
    }

运行后的UI

上传内容后

看上图，由于我自定义了一个函数，没有实现所以报错了，
提交后内容如下:

提交的数据

附加信息

view.html中的代码

                        <% if(item.dataType == "file"){ %>
                            <% if(item.url){%>
                                <input type="file" id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadOnlyFile(this)" <% if(item.url){ %>dataurl="<%:=item.url%>" <% } %> datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none" />
                                <input type="text" name="<%:=item.name%>" value="<%:=item.value%>" placeholder="<%:=item.placeholder%>" onclick="$('[id=<%:=item.name%>]').trigger('click');">
                            <%}%>
                            <% if(item.filehandler){%>
                                <input type="file" id="<%:=item.name%>" datanum="<%:=item.num%>" onchange=<%:=item.filehandler%> style="display:none" />
                                <input type="text" name="<%:=item.name%>" value="<%:=item.value%>" placeholder="<%:=item.placeholder%>" onclick="$('[id=<%:=item.name%>]').trigger('click');">
                            <%}%>
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>

对应的JS

                    case "file":
                        {
                            item.dataType = 'file';
                            if (_attribute.args1) {
                                item.url = _attribute.args1;
                            }
                            if(_attribute.args2){
                                item.type = _attribute.args2;
                            }
                            if (_attribute.args3) {
                                item.filehandler = _attribute.args3;
                            }
                            if (!item.url && !item.filehandler) {
                                item.url = "/api/app/Upload/UpFile";
                            }
                        }
                        break;

点击上传的逻辑

/**
 * 上传非图片 比如文件等
 **/
function handlerUploadOnlyFile(elc) {
    var _url = `${auto_root_path()}/Upload/UpFile`;
    var _dataurl = $(elc).attr('dataurl');
    if (_dataurl) {
        _url = _dataurl;
    }
    var _type = $(elc).attr('datatype');
    if(_type){
        _url=`${_url}${(_url.indexOf("?")>=0?'&':'?')}type=${_type}`;
    }
    var _name = $(elc).attr("id");
    var _num = 1;
    if (elc.files && elc.files.length > _num) {
        layer.msg(`选择的文件过多，至多选择${_num}个文件！`);
    }
    if (elc.files.length > 0) {
        var loadid = layer.load();
        var formData = new FormData();
        for (var k = 0; k < elc.files.length; k++) {
            formData.append(elc.files[k].name, elc.files[k]);
        }
        $.ajax({
            url: _url,
            type: 'post',
            contentType: false,
            processData: false,
            async: true,
            data: formData,
            headers: { "token": readToken() },
            success: function (obj) {
                layer.close(loadid);
                $(elc).parents(".formControls").find(`[name=${_name}]`).val(obj.data[0].url);
                elc.value = null;
            },
            error: function (res) {
                if (loadid != 0) {
                    layer.close(loadid);
                }
                elc.value = null;
                layer.msg(res.statusText, { icon: 'error', time: 3000 });
            }
        });
    } else {
        // layer.msg("请选择至少一个有效的文件！");readmemberToken
    }
}

API的案例

        /// <summary>
        /// 上传文件
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        [HttpPost]
        public WangEditorUpload UpFile(string type = "file")
        {
            var one = new WangEditorUpload();
            one.errno = 1;
            if (base.Request.Form != null)
            {
                if (base.Request.Form.Files != null)
                {
                    if (base.Request.Form.Files.Count > 0)
                    {
                        one.errno = 0;
                        one.data = new List<WangEditorUploadItem>();
                        for (var k = 0; k < base.Request.Form.Files.Count; k++)
                        {
                            var finput = base.Request.Form.Files[k];
                            //这里还要进行文件后缀的过滤
                            var item = new WangEditorUploadItem();
                            var extension = System.IO.Path.GetExtension(finput.FileName);
                            var filename = $"{finput.FileName}{k}{DateTimeOffset.Now.ToUnixTimeMilliseconds()}".ToMd5Lower();
                            var savepath = $"upload/{type}/{filename}.{extension}";
                            var path = System.IO.Path.GetDirectoryName(savepath);
                            if (!System.IO.Directory.Exists(path)) { System.IO.Directory.CreateDirectory(path); }
                            item.alt = finput.FileName;
                            item.href = $"/{savepath}";
                            item.url = $"/{savepath}";
                            using var image = Image.Load<Rgba32>(finput.OpenReadStream());
                            image.Mutate(x => x.Resize(0, 180));
                            image.Save(savepath);
                            item.url = $"/{savepath}";
                            finput.OpenReadStream().Dispose();
                            item.size = finput.Length;
                            one.data.Add(item);
                        }
                    }
                }
            }
            return one;
        }

更多特性见

贴代码PasteForm专题介绍

我们下期见!