这是我第一次在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. Django 配置JWT认证方式

    1. 安装 rest_framework + djangorestframework_simplejwt 安装djangorestframework_simplejwt :pip install dj ...

  2. LeetCode--Array--Container With Most Water (Medium)

    11. Container With Most Water (Medium)# Given n non-negative integers a1, a2, ..., an , where each r ...

  3. 第三家面试过程，及导出elcel的进一步小结。（8月11号 周五）

    今天收到第三家公司的面试通知,面试地址也在民治附近,面试时间是上午十点.今早又失眠了,感觉到这边这么几天,总是天天失眠,晚上睡不好白天瞌睡睡不着,估计还需要些许时间的适应,早上七点多我整理好面试需要准 ...

  4. 基于R语言的航空公司客户价值分析

    分析航空公司现状 1.行业内竞争 民航的竞争除了三大航空公司之间的竞争之外,还将加入新崛起的各类小型航空公司.民营航空公司,甚至国外航空巨头.航空产品生产过剩,产品同质化特征愈加明显,于是航空公司从价 ...

  5. vue-multi-module【多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署】

    基于 vue-cli 2 实现,vue 多模块.vue多项目集成工程 Github项目地址 : https://github.com/BothEyes1993/vue-multi-module 目标: ...

  6. python--制作微信好友照片墙

    知识来源:https://zhuanlan.zhihu.com/p/73975013 1.环境 os:MAC tool:python 3.7 ,pip3.7 2.前提: 使用pip3.7 instal ...

  7. tp5 一次性插入大量数据时分批处理

    如题,加入$arr 中有一万多条数据,如果直接使用insert插入的话就会报错,此时可以使用limit分批插入 $result = Db::connect($this->dbconfig()) ...

  8. 如何在最新版本的eclipse上使用低版本的jdk

    高版本的eclipse在第一次打开的时候只能配置相匹配的jdk.例如我所示版本eclipse版本初始化的时候提示要jdk1.8版本才能打开,可是根据实际工作情况需要jdk1.7. 我的eclipse版 ...

  9. 前端面试题-http和https区别

    说一下http和https https的SSL加密是在传输层实现的. (1)http和https的基本概念 http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求 ...

  10. Python 常用编码规范

    一.简明概述 1.编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头部必须加入#-*-coding:utf-8-*-标识 2.代码格式 2.1.缩进 统一使用 4 个空格进行 ...