Layui多图片上传以及中止上传、删除预览等相关操作

图片示例

上传前可删除图片，提交前将图片名称拼接

HTML代码

<div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <input type="text" lay-verify="required" hidden name="image" value="">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <label class="layui-word-aux">双击图片删除</label>
        <blockquote id="preview" class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;" >
            预览图：
            <div class="layui-upload-list" id="demo2" ></div>
        </blockquote>
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="model" id="save">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>

上面的input是之后用来传到后台的图片名称集合，图片上传前进行拼接，具体操作在下面

JS代码

//多图片上传
upload.render({
    elem: '#test2',
    url: '[[@{/admin/spu/uploadImage}]]', //改成您自己的上传接口
    multiple: true,   //是否允许多文件上传，默认未false
    acceptMine:'/image/*', //只选择图片
    auto: false,  //是否自动上传 ，默认为true
    number : 5,  //最大上传数量
    size: 300, //最大文件大小，单位k
    bindAction: '#save', //绑定的按钮
    field: 'file', //传到后台的字段名,默认file
    choose: function (obj) {
        files = obj.pushFile();
        obj.preview(function (index, file, result) {
            console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            // console.log(result); //得到文件base64编码，比如图片
            $('#demo2').append('<img src="' + result + '" id="'+index+'" alt="' + file.name + '" style="height: 100px;width: 100px;margin-right: 10px" class="layui-upload-img ">')
            $('#'+index).bind('dblclick', function () {//双击删除指定预上传图片
                delete files[index];//删除指定图片
                $(this).remove();
            });
        })
    },
    before: function(obj){
        if($("[name='brand']").val() == ''){
            return false;
        }else{
            console.log(files);
            var names='';
            layui.each(files, function (index,file) {
                console.log(file.name)
                names += file.name+',';

            });
            $("[name='image']").val(names)
            console.log(names);
        }
        return true;
    },
    allDone: function (res) {
        layer.msg("图片上传成功！", {icon: 1, time: 1000});
        //上传完毕回调
    },
    error: function (e) {
        //请求异常回调
        console.log(e)
    }
});

文档连接： Layui文件上传官方文档
这里我绑定的按钮刚好是提交的按钮，这就有点问题
如果图片已添加到预览，图片之后的控件为空，上传点击提交，这样图片以及图片之前的表单验证通过了，这样会触发图片传到后台，所以我把图片放到了最后一个，因为layui是从上往下验证的，before方法，是上传之前的操作，我是判断上面一个元素是否已经验证通过了，如果没有通过，值为空，则返回false，中止上传，但是这里要修改一个upload.js的文件，layui没这个功能，文档上也没看到，大家要是知道的话可以在下面评论下呀！
（因为我不知道怎么获取表单验证的结果，我查不到啊太难辽，所以就这样了，其实应该判断除图片的所有元素，我只判断一个的结果就是，如果我只填了图片上面的元素，以及添加图片到了预览，这时点击提交，图片会提交到后台，而添加操作则不会提交到后台，这样不能保证一致了）
这里引用的这位大佬的博客

upload.js要修改的代码，按Ctrl+Shift+F格式转换下，大概在139行

y = function() {//这是要修改的
           if ("choose" !== t && !l.auto || (l.choose && l.choose(g), "choose" !== t)) return l.before && l.before(g),
            a.ie ? a.ie > 9 ? u() : c() : void u()
        };

将这段代码放到上面的大括号中

return "choose" === t ? l.choose && l.choose(g) : ((l.before && l.before(g)) === false ? '' : a.ie ? a.ie > 9 ? u() : c() : void u())

这样就可以使用return false中止上传了

Java代码 Controller

@RequestMapping("/uploadImage")
@ResponseBody
public String uploadImages(@RequestParam MultipartFile file, HttpServletRequest request) throws FileNotFoundException {
    logger.info("上传商品图片");
    String path= "D:\\***\\**\\src\\main\\resources\\static\\img\\upload\\";
    //这里我就放绝对路径了
    File dir = new File(path);
    logger.info(dir.getAbsolutePath()+file.getOriginalFilename());
    if(!dir.exists()){
        dir.mkdirs();
    }
    try {
        logger.info(file.getName()+"----" + file.getResource());
        file.transferTo(new File(path+ DateUtil.getNowString() +file.getOriginalFilename()));
        //这里的DateUtil是我自定义的工具类，这个方法就是“2020021217”,当前时间字符串
    } catch (IOException e) {
        e.printStackTrace();
    }
    return ResultUtil.success("上传成功！","");
}

这里的file对应上面js中的(field: ‘file’, //传到后台的字段名)

第一次写博客，如果有问题的话可以评论来讨论学习下