基于layui上传图片

最新推荐文章于 2023-04-07 22:43:38 发布

it涛涛

最新推荐文章于 2023-04-07 22:43:38 发布

阅读量292

点赞数

文章标签： layui javascript html

本文链接：https://blog.csdn.net/sztdbk/article/details/120676732

版权

前端页面

html写法

<div class="layui-form-item">
    <div class="layui-col-xs5">
        <label class="layui-form-label"><span style="color: #ff4949;">*</span>海报图片:</label>
        <div class="layui-col-xs8" style="padding-top: 3px;">
            <div><span> 图片大小不能超过3MB：建议上传702*1200尺寸的图片，否则可能会造成图片模糊、变形等问题</span></div>
            <input type="hidden" class="url-list2">
            <div class="layui-upload">
                <div class="layui-upload-list" id="upload_img2" style="width: 139px;height: 250px; line-height: 200px; position: relative">
                    <div style="width: 156px;height: 250px;overflow-y: auto;">
                        <img id="posterTemplateUrl" src="../../static/image/add-long.png" style="width: 139px;">
                    </div>
                    <p style="width: 100%;text-align: center;height: 30px;display: none;line-height: 30px;position: absolute;bottom: 0;left: 0;color: #fff;background: #000;opacity: 0.7;font-size: 14px;">删除</p>
                </div>
            </div>
        </div>
    </div>
</div>

js写法

var uploadInst2 = upload.render({
            elem: '#upload_img2'
            ,url: '/api/tool/uploadImage'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.onload = function() {
                        $('#posterTemplateUrl').attr('src', result);
                        $('#upload_img2 p').show();
                    };
                    img.src = result;
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $(".url-list2").val(res.data.toString());
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst2.upload();
                });
            }
        });

        // 单张上传删除事件
        $('#upload_img2').on('click','p',function(e){
            e.stopPropagation();
            $(this).hide();
            $('#upload_img2 img').attr('src','../../static/image/add-long.png');
            $('.url-list2').val("");
        });

后台写法

@RequestMapping("/uploadImage")
public PageData uploadImage(@RequestParam(value="file",required=false) MultipartFile[] files) {
    try {
        //TODO 根据新增还是修改要更改上传路径
        String fileConstant = String.format(FileConstant.POSTER,UCHelper.getUserId());
        List<String> imageList = fileUpload(files, fileConstant);
        return PageData.newSuccess()
                .setData(imageList);
    } catch (ServiceException e) {
        return PageData.newFailed();
    }
}

private  List<String> fileUpload(MultipartFile[] files, String middlePath) {
    List<String> list = new ArrayList<String>();
    if (files != null && files.length > 0) {
        for (int i = 0; i < files.length; i++) {
            MultipartFile file = files[i];
            //重命名文件名
            String upFilename = file.getOriginalFilename();
            String format = upFilename.substring(upFilename.lastIndexOf("."));
            String fileName = DateUtils.formatTo(new Date(), "yyyyMMddHHmmssSSS") + "_" + new Random().nextInt(1000) + format;
            FileUtil.uploadPicture(file, domain + middlePath, fileName, list,middlePath);
        }
        for (int i = 0; i < list.size(); i++) {
            log.info("上传的图片" + list.get(i));
        }
    }
    return list;
}