elx-imgbox 前端图片选取和上传插件

一个基于element-ui，实现图片选取和上传的Vue插件，可显著提升管理后台图片选取、上传的用户体验。

源码： https://github.com/coderpan-com/elx-imgbox

效果截图

1、选取图片库中的图片

2、上传图片

require

• Vue 2.5+
• element-ui 2+
• jQuery

使用方法

1、引入依赖前端库

<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.5/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.0.5/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- elx-imgbox 直接引用GitHub上的文件，你可以下载到本地再引用 -->
<script src="https://raw.githubusercontent.com/erzh/elx-imgbox/master/dist/imgbox.js"></script>

2、在原生js或Vue代码中调用

// 参数设置
var opts = {
    uploadUrl: 'http://imgbox.imcm.me/test/upload.json',
    listUrl: 'http://imgbox.imcm.me/test/list.json',
    onSelect: function(img){
    // 选中图片后回调处理，每个图片回调一次
    console.log(img);
    }
};

// 调用功能，
var imgbox = Vue.elxImgbox(opts);
options
{
    uploadUrl: '',       // 图片上传URL
    listUrl: '',         // 图片列表数据URL
    multiple: true,      // 是否支持选取多个图片
    limit: 10,           // 一批次最多可上传图片数
    onSelect: null,      // 选择后回调函数
    enableUpload: true,  // 是否启用图片上传
    maxSize: 2           // 最大尺寸（M）
}

关于上传

• 支持选择单个文件和多个文件；
• 选择文件后，需要点击“确定上传”开始上传图片；
• 上传图片只要有一张成功则回调并关闭上传窗口
• 有错误发生ELEMENT.Message.error()提示

交互数据

上传返回数据格式

{
    "uploadfile_response": {
    "name":"图片名",
    "thumb":"图片缩略图链接",
    "你需要的其他属性": "其他属性值"
    }
}

列表数据格式

{
    "list":[
    {
        "name": "图片名",
        "thumb": "图片缩略图链接",
        "label": "图片长x宽",
        "你需要的其他属性": "其他属性值"
    }
    
    ],
    "total": "总图片数"
}