Easy Frame

Cropper - 图片截取

Cropper

手动引入

  • 初始化
<div id="user-avatar" class="e-widget-media" data-aspect-ratio="1" data-toggle="e-tooltip" data-original-title="更改头像">
    <img src="头像url" alt="用户头像"/>
</div>
<!-- 这里是封装的标签 -->
@include("/common/plugins/html/cropper.html", {"title": "头像设置"}){}

new Crop.CropAvatar($('#user-avatar'), function (data) {
    // 回调函数
    console.log(data);
});

示例截图 文件上传 上传成功返回数据示例

{
    "code": 200,
    "message": "请求成功",
    "data": {
        // 上传的文件名称
        "name": "9f8fde53-eef0-466d-98ce-0d65d02e67e3.jpg",
        // 上传成功后文件在服务器的路径 
        "path": "/Users/tengchong/Development/upload/easy-frame/temporary/2019/06/22/9f8fde53-eef0-466d-98ce-0d65d02e67e3.jpg",
        // 文件的访问url
        "url": "/static/temporary/2019/06/22/9f8fde53-eef0-466d-98ce-0d65d02e67e3.jpg",
        // 文件大小
        "length": 421481,
        // 文件后缀
        "suffix": ".jpg"
    }
}

${project.file-upload-path}/temporary/ 为临时目录每天0点会清空前天的临时文件，数据保存成功后请使用 com.frame.easy.util.file.FileUtil.moveToFormal(String path) 将文件移至正式目录。否则后果自负

← Table - 表格 →