layui插件croppers的使用

这是我第一次在layui环境下面使用croppers插件.先粘贴下前端代码并附上我的目录结构吧。

@{
ViewData[“Title”] = “Croppers”;
}
<!DOCTYPE html>
<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>

下面的这张图是我的目录结构！

下面这张图是我的后台代码！

[HttpPost]
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 } });
}