贴代码框架PasteForm特性介绍之file

简介

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上不一样，毕竟文件没法预览

字段	类型	示例	说明
args1	字符	/api/app/Upload/UpFile	表示上传的路径，默认是/api/app/Upload/UpFile,你也可以自己修改他,args1或者args3必填其中一个
args2	字符	file	datadir
args3	字符	global_upload_file(this);	onchange函数
args4	字符	待定	为后续扩展做准备

案例的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%>" οnchange=<%:=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专题介绍

我们下期见!