这是我第一次在layui环境下面使用croppers插件.先粘贴下前端代码并附上我的目录结构吧。
-
-
-
ViewData["Title"] = "Croppers";
-
-
-
-
-
-
-
-
<link href="~/lib/layui/layui.css" rel="stylesheet" />
-
-
-
-
<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 class="layui-input-inline">
-
<div class="layui-upload-list" style="margin:0">
-
<img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
-
-
-
<div class="layui-input-inline layui-btn-container" style="width: auto;">
-
<button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
-
-
<div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</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>
-
-
-
base: ‘/lib/layui/cropper/‘
-
}).use([‘form‘, ‘croppers‘], function () {
-
-
-
, croppers = layui.croppers
-
-
-
-
-
-
-
-
-
-
-
-
-
$("#inputimgurl").val(url);
-
$("#srcimgurl").attr(‘src‘, url);
-
-
-
-
-
-
-
下面的这张图是我的目录结构！
下面这张图是我的后台代码！
-
-
public async Task<IActionResult> UpLoadImg()
-
-
-
var files = Request.Form.Files;
-
long size = files.Sum(f => f.Length);
-
string webRootPath = _webHostEnvironment.WebRootPath;
-
-
-
foreach (var formFile in files)
-
-
-
-
-
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做的都是异步任务,其次再访问根目录的方法跟以前不一样了,大家可以看代码多体会体会！
layui插件croppers的使用
原文：https://www.cnblogs.com/AndyLin/p/13036540.html
