layui插件croppers的使用

最新推荐文章于 2024-02-21 19:21:24 发布

原创最新推荐文章于 2024-02-21 19:21:24 发布 · 3.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#asp.net

Asp.net 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在layui框架中使用croppers插件的详细过程，包括前端代码的实现和目录结构展示。作者强调了后台返回JSON格式的重要性，并分享了在.NET Core MVC异步任务中的经验，指出访问根目录的方法变化。

这是我第一次在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 } });

        }

需要注意的是这个json返回格式我一开始参考了很多网上的例子发现都是错误的，后来还是我认真阅读了这个js的后台代码找到了正确的返回格式