layui插件croppers的使用
这是我第一次在layui环境下面使用croppers插件.先粘贴下前端代码并附上我的目录结构吧。
-
-
@{
-
ViewData["Title"] = "Croppers";
-
}
-
-
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title></title>
-
<link href="~/lib/layui/layui.css" rel="stylesheet" />
-
-
</head>
-
<body>
-
<div class="layui-form-item">
-
<label class="layui-form-label">头像</label>
-
<div class="layui-input-inline">
-
<input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
-
</div>
-
<div class="layui-input-inline">
-
<div class="layui-upload-list" style="margin:0">
-
<img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
-
</div>
-
</div>
-
<div class="layui-input-inline layui-btn-container" style="width: auto;">
-
<button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
-
</div>
-
<div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
-
</div>
-
<script src="~/lib/layui/layui.js"></script>
-
-
-
-
<link href="~/lib/layui/cropper/cropper.css" rel="stylesheet" />
-
<script src="~/lib/layui/cropper/croppers.js"></script>
-
<script>
-
layui.config({
-
base: '/lib/layui/cropper/' //layui自定义layui组件目录
-
}).use(['form', 'croppers'], function () {
-
var $ = layui.jquery
-
, form = layui.form
-
, croppers = layui.croppers
-
, layer = layui.layer;
-
-
//创建一个头像上传组件
-
croppers.render({
-
elem: '#editimg'
-
, saveW: 150 //保存宽度
-
, saveH: 150
-
, mark: 1 / 1 //选取比例
-
, area: '900px' //弹窗宽度
-
, url: "/Home/UpLoadImg" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
-
, done: function (url) { //上传完毕回调
-
debugger
-
$("#inputimgurl").val(url);
-
$("#srcimgurl").attr('src', url);
-
}
-
});
-
-
});
-
</script>
-
</body>
-
</html>
下面的这张图是我的目录结构！
下面这张图是我的后台代码！
-
[
-
public async Task<IActionResult> UpLoadImg()
-
{
-
var date = Request;
-
var files = Request.Form.Files;
-
long size = files.Sum(f => f.Length);
-
string webRootPath = _webHostEnvironment.WebRootPath;
-
-
string newFileName = "";
-
foreach (var formFile in files)
-
{
-
if (formFile.Length > 0)
-
{
-
-
string fileExt = System.IO.Path.GetExtension(formFile.FileName); //文件扩展名，不含“.”
-
long fileSize = formFile.Length; //获得文件大小，以字节为单位
-
newFileName = System.Guid.NewGuid().ToString() + "." + fileExt; //随机生成新的文件名
-
var filePath = webRootPath + "/upload/" + newFileName;
-
using (var stream = new FileStream(filePath, FileMode.Create))
-
{
-
-
await formFile.CopyToAsync(stream);
-
}
-
-
}
-
}
-
return Json(new { code = 0,msg="上传成功", data =new { src= "/upload/" + newFileName } });
-
-
}
需要注意的是这个json返回格式我一开始参考了很多网上的例子发现都是错误的，后来还是我认真阅读了这个js的后台代码找到了正确的返回格式
重点看绿色框框里面的匿名对象里面还有对象所以new里面还要一个new。
总结下遇到几个花费了我时间的其他方面的点。第一是新的.net core框架mvc做的都是异步任务,其次再访问根目录的方法跟以前不一样了,大家可以看代码多体会体会！
