总后台顶部实现站内信功能

2022年开来我一直沉迷于公司的业务开发，更多的是curd的工作还有自己在学习的分布式锁的知识，但是还没整理完毕，心想总得写点什么，不然都要荒废了！！！，刚好最近的项目有一个功能点很有意思：是一个上传图片的同时也要写入文字，这样的设计目的是让另一客户端取出数据的时候渲染是图文并茂的样子，并且不止一组图文，有涉及到多组，所以需要对元素有增加和删除的细节。

效果图

思路

首先是把样式给画出来，接下来上传图片，上传之后将成功的值渲染到页面上，并在隐藏域中放置图片的名称，文本输入这点不需要赘述，填什么提交什么，这样的一组图文就准备在表单里等待提交了。之后添加新的一组图文，那么就需要将这一组图文的元素做为一个对象，点击加号多一个出来，减号少一个

组件的绘画html

因为找不到有这样的插件（如果有的话，欢迎告诉我！），所以只能靠自己人工去绘画

第一步 做一个上传的图片的框还有一个文本输入框

<div class="taskStep">
	<input type="hidden" name="pic" id="pic1"/>
		<div class="task-step">
		   <div class="task-index-info">
				<div class="task-index">
					<span class="task-index-num">1</span>
						<input type="hidden" name="step" value="1">
                    </div>
                </div>
        <div class="task-img" id="taskImg1" onclick="picUpload(1)">
              <span>点击上传图片</span>
        </div>
        <div class="task-intro">
             <textarea class="form-control" name="stepIntro" style="height: 100%;width: 100%"></textarea>
        </div>
    </div>
    <input type="file" name="file" accept="image/*" style="display: none;" id="file1"/>
</div>

组件的绘画css

<style>
        .task-step {
            width: 85%;
            height: 180px;
            line-height: 130px;
            font-size: 20px;
            text-align: center;
            border-width: 1px;
            border-style: dashed;
            border-color: rgb(229, 230, 231);
            border-image: initial;
            display: flex;
            margin-bottom: 15px;
        }

        .task-index-info {
            height: 70%;
            padding-top: 30px;
            padding-left: 10px;
        }

        .task-index {
            width: 40px;
            height: 40px;
            background-color: sandybrown;
            border-radius: 50%;
            margin: 0 auto;
        }

        .task-index-num {
            height: 40px;
            line-height: 40px;
            display: block;
            color: #FFF;
            text-align: center
        }

        .task-img {
            width: 30%;
            height: 90%;
            border-width: 1px;
            border-style: dashed;
            border-color: rgb(229, 230, 231);
            border-image: initial;
            margin: 10px 10px 10px 10px;
        }

        .task-img img {
            width: 100%;
            height: 100%;
        }

        .task-intro {
            width: 55%;
            height: 100%;
            float: left;
            font-size: small;
            text-align: center;
            line-height: 20px;
            padding: 10px 10px 10px 10px
        }
    </style>

图片上传

    function picUpload(step) {
        $('#file' + step).click();
        $('#file' + step).on("change", function () {
            var formData = new FormData();
            formData.append("file", this.files[0], this.value);
            debugger
            $.ajax({
                type: "POST",
                url: img_url + '/upload',
                data: formData,
                contentType: false, //必须
                processData: false, //必须
                dataType: "json",
                success: function (res) {
                    $('#taskImg' + step).html('<img src="' + img_url_qr + res.data.name + '" class="rm-img" />');
                    $('#pic' + step).val(res.data.name);
                },
                error: function () {
                    $.global.openErrorMsg("服务器异常，上传失败！");
                }
            });
        });
    }

加号和减号的实现js

    function addStep() {
        let step = $(".task-index-num:last").html();
        step = accAdd(step, 1);
        let copyHtml =
            '<div class="taskStep">' +
            '<input type="hidden" name="pic" id="pic' + step + '"/>' +
            '<div class="task-step">' +
            '     <div class="task-index-info">' +
            '          <div class="task-index">' +
            '                <span class="task-index-num">' + step + '</span>' +
            '                 <input type="hidden" name="step" value="' + step + '">' +
            '           </div>' +
            '      </div>' +
            '      <div class="task-img" id="taskImg' + step + '" onclick="picUpload(' + step + ')">' +
            '           <span>点击上传图片</span>' +
            '       </div>' +
            '       <div class="task-intro">' +
            '             <textarea class="form-control" name="stepIntro" style="height: 100%;width: 100%"></textarea>' +
            '        </div>' +
            '   </div>' +
            '   <input type="file" name="file" accept="image/*"  style="display: none;" id="file' + step + '"/>' +
            '</div>';
        $(".taskStep:last").after().append(copyHtml);
    }

    function deleteStep() {
        let stepLength = $(".taskStep").length;
        if (stepLength > 1) {
            $("div.taskStep:last").remove();
        }
    }

ajax提交

提交的时候有三个元素需要我们在后端进行接收

1. pic 这个上传图片的数据将成一个数组的形式
2. step 这是步骤的序号将成一个数组的形式，
3. stepIntro 这个是步骤的文字将成一个数组的形式

如何存储这样的数据？

接受到数组以后，循环步骤step这个数组，在这个循环中同一个下标去取图片的数组和文字的数组，组成一条数组进行插入即可