Layui框架图片上传样式修改

 

 众所周知 Laui 上传文件样式一共就那几种 满足不了需求 新接手这项目恰好样式要修改一下所以记录一下 保留等以后需要

官网给出的样式而我需要实现文章开头的那个样式

 直接上代码

	//html代码
    <div class="layui-form-item " style="width:calc(100% - 100px)">
		<label class="layui-form-label"><span class="star">*</span>图标:</label>
		<div class="layui-input-blockOne" id="ID-upload-demo-btn"
							style="width: 100px;height: 100px; border: 1px dotted #129bff;display: flex; justify-content: center; align-items: center;cursor: pointer;">
			<i class="layui-icon layui-icon-add-1" id="icon-1"
								style="font-size: 30px; color: #1E9FFF;"></i>
			<img class="layui-upload-img" id="ID-upload-demo-img"
								style="width: 100%; height:100%;display: none;">
		</div>
	</div>

//js代码

// 单图片上传
var icon = ''  //图片链接
var fileName = ''   //图片名称
layui.use('upload', function () {
    var upload = layui.upload;
    var elem = '#ID-upload-demo-btn'
    //执行上传组件
    upload.render({
        elem: elem, //绑定元素，上面的layui-upload-drag类或者你自己定义的元素id
        url: uploadFile, //上传接口
        before: function (obj) {
            // 预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                fileName = file.name
                $('#icon-1').hide()  //图标隐藏
                $('#ID-upload-demo-img').show()   //图片显示
                $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
            });
        },
        accept: "images",
        exts: "jpg|png|gif|bmp|jpeg",
        headers: {
            'dm-authorize-token': $.cookie("token"),
        },
        done: function (res) {
            if (res.code == 200) {
                //上传完毕回调 
                layer.msg("上传成功");
                icon = res.msg
            } else {
                layer.msg('上传失败');
            }
        },
        error: function () {
            //请求异常回调
        }
    });
});

行内样式 拿去直接修改 他是在一个表单中的 我只上传了图片上传的html代码

图片回显代码:

                       // 图片回显  e.data是你编辑时表单回显的数据
                     $('#icon-1').hide()
                     $('#ID-upload-demo-img').show()
                     icon = e.data.icon
                     var uploadImgUrl = e.data.icon;
                     $('.layui-upload-img').attr('src', uploadFileUrl + uploadImgUrl);

效果图:

 再次点击会重新上传!