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

简介

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

案例源码

案例源码在

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

不定期升级

AllInDto!

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

在这里插入图片描述

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

image

当前特性可以作用于所有的Dto中，具体的样式由前端决定，支持单图和多图模式

字段	类型	示例	说明
args1	数字	1	图片数量
args2	字符	cate	存放在什么位置，上传图片的时候会附带到参数type中也会用于图片的样式？
args3	字符	60*60	图片是否需要压缩，压缩的宽高，不压缩的设置为0,比如60*0
args4	字符	small	small,normal,big表示图片的大小三个规格，默认normal，如果要返回格式，则由dataFrom决定

UI

在这里插入图片描述

Dto

    /// <summary>/// 图片案例/// </summary>public class ImageModel{/// <summary>/// 图片1/// </summary>[ColumnDataType("image","1","icon","120*120")]public string Img1 { get; set; }/// <summary>/// 图片2/// </summary>[ColumnDataType("image", "1", "head", "750*0")]public string Img2 { get; set; }/// <summary>/// 图片3/// </summary>[ColumnDataType("image", "2", "head", "750*0")]public string Img3 { get; set; }/// <summary>/// 图片4/// </summary>[ColumnDataType("image", "2", "head", "120*0")]public string[] Img4 { get; set; }}

提交的数据

在这里插入图片描述
提交的json数据如下

注意看提交的信息中的img3,和img4,一个是字符串，使用了拼接，一个是数组，这个是由原来的Dto的数据类型决定的！

默认上传文件的地址为/api/app/Upload/UpImage,注意看上图的url的参数type和size就是特性中配置的类型和大小！

表格中显示

如果你对ListDto的字段进行image特性标注，则在表格中会以image的模式显示，而不是字符串！

UpImage

你可以基于这个案例，自己修改API是现实上传图片

        /// <summary>/// 上传图片/// </summary>/// <returns></returns>[HttpPost][TypeFilter(typeof(RoleAttribute), Arguments = new object[] { "data", "view" })]public WangEditorUpload UpImage(string type = "bookmark", string size = ""){var one = new WangEditorUpload();one.errno = 1;var _month = DateTime.Now.ToString("yyyyMM");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);if (String.IsNullOrEmpty(extension)){extension = ".jpg";}else{if (!extension.StartsWith(".")){extension = "." + extension;}}if (extension != ".gif"){extension = ".webp";}var filename = $"{finput.FileName}{k}{DateTimeOffset.Now.ToUnixTimeMilliseconds()}".ToMd5Lower();var _char = Path.DirectorySeparatorChar.ToString();var savepath = $"upload/{type}/{_month}/{filename}{extension}";var path = System.IO.Path.GetDirectoryName(savepath);if (!System.IO.Directory.Exists(path)) { System.IO.Directory.CreateDirectory(path); }if (System.IO.File.Exists(savepath)) { System.IO.File.Delete(savepath); }item.alt = finput.FileName;item.href = $"/{savepath}";item.url = $"/{savepath}";if (IsImageExtension(finput.FileName)){var _width = 0;var _height = 0;if (!String.IsNullOrEmpty(size)){var _sizes = size.Split('*');int.TryParse(_sizes[0], out _width);int.TryParse(_sizes[1], out _height);}using var image = Image.Load<Rgba32>(finput.OpenReadStream());if (image.Width > _width && _width != 0){image.Mutate(x => x.Resize(_width, _height));}else{if (image.Height > _height && _height != 0){image.Mutate(x => x.Resize(_width, _height));}}if (extension == ".webp"){image.Save(savepath, new WebpEncoder());}else{image.Save(savepath);}item.url = $"/{savepath}";finput.OpenReadStream().Dispose();}else{using (FileStream fs = new FileStream(savepath, FileMode.Create)){finput.CopyTo(fs);fs.Flush();}}item.size = finput.Length;one.data.Add(item);}}}}return one;}

PasteForm_181">PasteForm附加信息

特性处理

                    case "image":{item.dataType = 'image';if (_attribute.args1) {item.num = parseInt(_attribute.args1);} else {item.num = 1;}if (_attribute.args2) {item.type = _attribute.args2;}if (_attribute.args3) {item.size = _attribute.args3;}if (item.value) {if (item.num > 1) {if (item.dataFrom == "String[]") {item.images = item.value;//多个图片是一个数组，字符串数组的形式item.value = item.value.join(',');} else {item.images = item.value.split(',');//多个图片之间使用,隔开}}}if (item.num > 1) {item.singlerow = true;}}break;

UI逻辑

                        <% if(item.dataType == "image" || item.dataType=="images"){ %><input type="text" style="display:none" name="<%:=item.name%>" value="<%:=item.value%>"><input type="file" multiple id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadFile(this)" datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none;" /><% if(item.num ==1){%><label for="<%:=item.name%>"><img class="form-image-head" <% if(item.value && item.value !=null ){ %>src="<%:=item.value%>"<%}%> ><%if(!item.value || item.value ==null){%><span class="iconadd icon-add"><i class="Hui-iconfont Hui-iconfont-add2 icon"></i></span><%}%></label><span class="placeholder"><%:=item?.placeholder || ''%></span><% }else{ %><span class="placeholder"><%:=item?.placeholder || ''%></span><ul class="imageul"><li><label for="<%:=item.name%>"><span class="icon-add"><i class="icon Hui-iconfont Hui-iconfont-add2"></i></span></label></li><%if(item.images){%><%item.images.forEach(_img=>{%><li><img src="<%:=_img%>"><i class="Hui-iconfont Hui-iconfont-close2 icon-close"  onclick="handlerRemoveImageItem(this)"></i></li><%})%><%}%><!-- <li><img><i class="iconfont icon-close" οnclick="handlerRemoveImageItem(this)"></i></li> --></ul><% } %><%}%>

更多特性见

贴代码PasteForm专题介绍

我们下期见!