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

  1.  
     
  2.  
    @{
  3.  
    ViewData["Title"] = "Croppers";
  4.  
    }
  5.  
     
  6.  
    <!DOCTYPE html>
  7.  
    <html>
  8.  
    <head>
  9.  
    <meta charset="utf-8" />
  10.  
    <title></title>
  11.  
    <link href="~/lib/layui/layui.css" rel="stylesheet" />
  12.  
     
  13.  
    </head>
  14.  
    <body>
  15.  
    <div class="layui-form-item">
  16.  
    <label class="layui-form-label">头像</label>
  17.  
    <div class="layui-input-inline">
  18.  
    <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
  19.  
    </div>
  20.  
    <div class="layui-input-inline">
  21.  
    <div class="layui-upload-list" style="margin:0">
  22.  
    <img src="./微信图片_20190404185124.png" id="srcimgurl" class="layui-upload-img">
  23.  
    </div>
  24.  
    </div>
  25.  
    <div class="layui-input-inline layui-btn-container" style="width: auto;">
  26.  
    <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
  27.  
    </div>
  28.  
    <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
  29.  
    </div>
  30.  
    <script src="~/lib/layui/layui.js"></script>
  31.  
     
  32.  
     
  33.  
     
  34.  
    <link href="~/lib/layui/cropper/cropper.css" rel="stylesheet" />
  35.  
    <script src="~/lib/layui/cropper/croppers.js"></script>
  36.  
    <script>
  37.  
    layui.config({
  38.  
    base: '/lib/layui/cropper/' //layui自定义layui组件目录
  39.  
    }).use(['form', 'croppers'], function () {
  40.  
    var $ = layui.jquery
  41.  
    , form = layui.form
  42.  
    , croppers = layui.croppers
  43.  
    , layer = layui.layer;
  44.  
     
  45.  
    //创建一个头像上传组件
  46.  
    croppers.render({
  47.  
    elem: '#editimg'
  48.  
    , saveW: 150 //保存宽度
  49.  
    , saveH: 150
  50.  
    , mark: 1 / 1 //选取比例
  51.  
    , area: '900px' //弹窗宽度
  52.  
    , url: "/Home/UpLoadImg" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
  53.  
    , done: function (url) { //上传完毕回调
  54.  
    debugger
  55.  
    $("#inputimgurl").val(url);
  56.  
    $("#srcimgurl").attr('src', url);
  57.  
    }
  58.  
    });
  59.  
     
  60.  
    });
  61.  
    </script>
  62.  
    </body>
  63.  
    </html>

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

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

  1.  
    [HttpPost]
  2.  
    public async Task<IActionResult> UpLoadImg()
  3.  
    {
  4.  
    var date = Request;
  5.  
    var files = Request.Form.Files;
  6.  
    long size = files.Sum(f => f.Length);
  7.  
    string webRootPath = _webHostEnvironment.WebRootPath;
  8.  
     
  9.  
    string newFileName = "";
  10.  
    foreach (var formFile in files)
  11.  
    {
  12.  
    if (formFile.Length > 0)
  13.  
    {
  14.  
     
  15.  
    string fileExt = System.IO.Path.GetExtension(formFile.FileName); //文件扩展名，不含“.”
  16.  
    long fileSize = formFile.Length; //获得文件大小，以字节为单位
  17.  
    newFileName = System.Guid.NewGuid().ToString() + "." + fileExt; //随机生成新的文件名
  18.  
    var filePath = webRootPath + "/upload/" + newFileName;
  19.  
    using (var stream = new FileStream(filePath, FileMode.Create))
  20.  
    {
  21.  
     
  22.  
    await formFile.CopyToAsync(stream);
  23.  
    }
  24.  
     
  25.  
    }
  26.  
    }
  27.  
    return Json(new { code = 0,msg="上传成功", data =new { src= "/upload/" + newFileName } });
  28.  
     
  29.  
    }

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

重点看绿色框框里面的匿名对象里面还有对象所以new里面还要一个new。

总结下遇到几个花费了我时间的其他方面的点。第一是新的.net core框架mvc做的都是异步任务,其次再访问根目录的方法跟以前不一样了,大家可以看代码多体会体会！

layui插件croppers的使用的更多相关文章

  1. django项目使用layui插件给网站设置一个日历挂件，很简单实用。

    进入https://www.layui.com/首页下载layui文件 下载解压后把文件放在static静态文件中, html页面引入css和js <link rel="stylesh ...

  2. layui+croppers完成图片剪切上传

    不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  3. layui 日期插件一闪而过

    关于一个layui插件日期的问题,在本地调试都是可以的,但发布到服务器上的时候,日期插件一闪而过,后来我以为是各个插件之间的冲突,我就每个插件的排除,但是还是无动于衷,然后我就去官网看了下是,需要加一 ...

  4. 权限管理系统之SpringBoot集成LayUI实现后台管理首页

    万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术等,也在网上百度了好多,计划使用SpringBoot + Mybatis + thymeleaf  + LayUI + S ...

  5. 在layui中使用ajax不起作用

    又是一个坑,坑了我一个下午.在layui插件中使用jquery的ajax请求,一点反应都没有,不管是改成get还是post请求,后台毫无反应,前端谷歌调试也没有报半点错. js代码如下: layui. ...

  6. vue layui

    关于 vue中使用layui插件,个人一些小小的心得. 我是全局的引入,在static文件夹里存放layui的完整代码 在index页面中标签引入 <link rel="stylesh ...

  7. layui table指定某一行样式

    1.想指定layui table中某一行的样式,找了这个资源可行.转自: https://blog.csdn.net/weixin_44729896/article/details/100524824 ...

  8. layui经典模块化前端UI框架初识

    layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对 ...

  9. layui的入门使用

    1.如果使用单独的layui插件的话需要先引入jquery的插件,官方建议1.8+的版本. 2.引入后就能根据规则正常使用了.

随机推荐

  1. 🏃‍♀️点亮你的Vue技术栈，万字Nuxt.js实践笔记来了~

    前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...

  2. Dubbo对Spring Cloud说：来老弟，我要拥抱你

    项目地址 https://github.com/yinjihuan/kitty-cloud 前言 Kitty Cloud 开源后有以为朋友在 GitHub 上给我提了一个 issues,问为什么项目中 ...

  3. 聊聊Grpc使用中的坑以及怎么填

    总所周知,随着云技术的发展,和业务的复杂度的上升,越来越多的系统开始拆分成独立的子模块微服务.模块之间免不了相互通信.但是随着业务量的增多,传输量也随之增大,偶发性timeout,无响应, 传输量过大 ...

  4. [Abp vNext 入坑分享] - 7.Automapper与validation的使用

    简要说明 [项目源码] [章节目录] 本文主要介绍Automapper与Validation的使用方法.首先使用Automapper的目的是引入组件完成entity与dto之间的转换以达到简化代码的目 ...

  5. axios请求拦截器(修改Data上的参数 ==>把data上的参数转为FormData)

    let instance = axios.create({ baseURL: 'http://msmtest.ishare-go.com', //请求基地址 // timeout: 3000,//请求 ...

  6. 感觉shopex现在的升级方式太慢了

    我是说产品的更新,484,485是一个经典的版本,那时候免费,shopex 系统市场占用率很高.但是485以后呢,只有小版本的更新,fxw ,ekd 都是改进版本吧,没用特别大幅度的更新.5年前,10 ...

  7. Jquery动画，排队与并发

    一.事件绑定 1.鼠标事件:模拟触发 什么是模拟触发? 虽然没有点在按钮上,也可以触发按钮的事件处理函数. 如何:$元素.trigger("事件名") 即使没有点在指定的元素上,也 ...

  8. Oracle操作时间-----摘抄而来

    1.日期时间间隔操作  当前时间减去7分钟的时间  select sysdate,sysdate - interval ’7’ MINUTE from dual  当前时间减去7小时的时间  sele ...

  9. poj2455 k条路最小化最长边

    Secret Milking Machine Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12414   Accepted ...

  10. 蓝桥杯 试题 历届试题 对局匹配 DP解决

    问题描述 小明喜欢在一个围棋网站上找别人在线对弈.这个网站上所有注册用户都有一个积分,代表他的围棋水平. 小明发现网站的自动对局系统在匹配对手时,只会将积分差恰好是K的两名用户匹配在一起.如果两人分差 ...