简介
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附加信息
特性处理
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专题介绍
我们下期见!
