文章封面设计2.0+promise

效果

css

.cover {
    width: 200px;
    margin-bottom: 15px;
}

.img-wrap {
    height: 100px;
    width: 200px;
    border: 2px dotted #d1d5da;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.img-action {
    display: none;
    align-items: center;
    justify-content: space-around;
}

.cover:hover > .img-action {
    display: flex;
}

html

                        <div class="form-group">
                            <label>文章封面</label>
                            <div>
                                <div class="cover">
                                    <div class="img-wrap" data-origin-src="">
                                    </div>
                                    <div class="img-action">
                                        <button type="button" class="btn btn-default upload-btn" title="上传">
                                            <i class="lu icon-shangchuan"></i>
                                        </button>
                                        <button type="button" class="btn btn-default del-btn" title="删除">
                                            <i class="lu icon-shanchu"></i>
                                        </button>
                                        <button type="button" class="btn btn-default restore-btn" title="复原">
                                            <i class="lu icon-huifu"></i>
                                        </button>
                                    </div>
                                </div>
                                <span class="cover-msg">优质的封面有利于推荐，格式支持png、jpg、jpeg</span>
                                <input type="text" name="pic" class="form-control pic"
                                >
                            </div>
                        </div>

js

            function p1(src) {
                return new Promise(function (resolve, reject) {
                    //获取原图src
                    if (src === undefined) {
                        reject("请先上传封面~")
                    } else {
                        let originSrc = $('.cover .img-wrap').attr('data-origin-src');
                        if (src === originSrc) {
                            //这里代表是原来的那张图不需要异步删除图片，直接删除dom即可
                            $('.cover .img-wrap img').remove();
                            $(".pic").val("")
                            resolve("删除成功")
                        } else {
                            //异步删除图片
                            $.ajax({
                                url: "<{url('/article/cover')}>",
                                method: 'delete',
                                data: {
                                    "file": src
                                },
                                dataType: "json",
                                success: (res) => {
                                    if (res.code === 200) {
                                        resolve("异步删除成功")
                                        $('.cover .img-wrap img').remove();
                                        $(".pic").val("")
                                    } else {
                                        reject('删除失败')
                                    }
                                }
                            })
                        }
                    }

                });
            }

            //删除按钮操作
            $('.cover .del-btn').on('click', function () {
                //获取src地址
                let src = $('.cover .img-wrap > img').attr('src');

                p1(src).catch(function (val) {
                    Toast.fire({
                        icon: "error",
                        title: val
                    })
                })
            })

            $('.cover .restore-btn').on('click', function () {
                //获取origin地址
                let originSrc = $.trim($('.cover .img-wrap').attr('data-origin-src'));

                if (originSrc === '') {
                    Toast.fire({
                        icon: "error",
                        title: '当前无恢复封面~'
                    })
                } else {
                    //删除原来的图片
                    //获取图片地址
                    let src = $('.cover .img-wrap > img').attr('src');

                    if (src != undefined) {//有图片就先删除原来上传的图片
                        p1(src).then(function (val) {

                            $('.cover .img-wrap').html(`<img src="${originSrc}">`)
                            //给隐藏域赋值
                            $(".pic").val(originSrc)
                        }).catch(function (val) {
                            Toast.fire({
                                icon: "error",
                                title: val
                            })
                        })
                    } else {//没有就直接还原
                        $('.cover .img-wrap').html(`<img src="${originSrc}">`)
                        //给隐藏域赋值
                        $(".pic").val(originSrc)
                    }
                }
            })

            //上传图片操作按钮
            $('.cover .upload-btn').on('click', function () {

                let input = document.createElement("input")
                input.type = "file"
                input.accept = ".png,.jpg,.jpeg"
                input.click()

                validPic.init2(input)

                //不是指定文件
                input.addEventListener("error", function () {
                    Toast.fire({
                        icon: "error",
                        title: "只支持png、jpg、 jpeg格式图片"
                    })
                }, false)


                //是指定文件回显操作
                input.addEventListener("success", function (e) {

                    //获取图片地址
                    let src = $('.cover .img-wrap > img').attr('src');

                    if (src === undefined) {//没有图片直接上传
                        imgPost(input);
                    } else {//有图片先删除原来的图片
                        p1(src).then(function (val) {
                            imgPost(input);
                        }).catch(function (val) {
                            Toast.fire({
                                icon: "error",
                                title: val
                            })
                        })
                    }
                }, false)


            });

            function imgPost(input) {

                //创建一个 formdata对象
                let formData = new FormData()
                //file对象
                let file = input.files[0]
                formData.append("file", file)
                $.ajax({
                    url: "<{url('/article/cover')}>",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 200) {

                            $('.cover .img-wrap').html(`<img src="${res.data.url}">`)
                            //给隐藏域赋值
                            $(".pic").val(res.data.url)

                        } else {
                            Toast.fire({
                                icon: "error",
                                title: res.msg
                            })
                        }
                    }
                })
            }