Calculation/app/view/dashboard/msg_add.ejs

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main"><h2>消息通知</h2></div>
    </div>
    <div class="content-wrap">
        <div class="sjs-height-0">
            <div class="container py-5">
                <form id="save-form" class="row" action="/sp/<%- ctx.subProject.id %>/dashboard/msg/set/<%= msgInfo.id === undefined ? 0 : msgInfo.id %>" method="post">
                    <div class="card col-9">
                        <div class="card-body">
                            <div class="msg-height-content">
                                <input-text name="title" id="title" placeholder="请输入标题" required="true" label="标题"
                                            value="<%= msgInfo.title %>"></input-text>
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="exampleCheck1" name="istop" value="1" <% if (msgInfo.istop !== undefined && msgInfo.istop !== '0') { %>checked<% } %>>
                                    <label class="form-check-label" for="exampleCheck1">重要通知(标红置顶)</label>
                                </div>
                                <div class="form-group">
                                    <label>内容</label>
                                    <div>
                                        <textarea id="content" rows="15" name="content" class="form-control form-control-sm"><%- msgInfo.content %></textarea>
                                    </div>
                                </div>
                                <div class="form-group" id="msg-file">
                                    <label>附件</label>
                                    <input type="hidden" value="<%= msgInfo.id === undefined ? 0 : msgInfo.id %>" id="mid">
                                    <div class="form-group upload-permission">
                                        <label for="formGroupExampleInput">单个文件大小限制：30MB，支持<span data-toggle="tooltip" data-placement="bottom" title="doc,docx,xls,xlsx,ppt,pptx,pdf">office等文档格式</span>、<span data-toggle="tooltip" data-placement="bottom" title="jpg,png,bmp">图片格式</span>、<span data-toggle="tooltip" data-placement="bottom" title="rar,zip">压缩包格式</span></label>
                                        <br>
                                        <input type="file" class="" multiple>
                                    </div>
                                    <div class="sp-wrap" style="overflow: auto">
                                        <table class="table table-sm table-bordered" id="file-table">
                                            <thead>
                                            <tr class="text-center">
                                                <th width="5%">序号</th><th>名称</th><th width="15%">上传人</th><th width="15%">上传时间</th><th width="15%">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 bd-toc">
                        <div class="card">
                            <div class="card-body">
                                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>">
                                <% if (msgInfo.id === undefined) { %>
                                    <button type="submit" class="btn btn-primary">确认添加</button>
                                <% } else { %>
                                    <button type="submit" class="btn btn-primary">确认修改</button>
                                    <a href="#del-modal" data-toggle="modal" data-target="#del-modal" class="btn btn-danger">删除</a>
                                <% } %>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<%- jsValidator %>
<script src="/public/js/moment/moment.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#save-form',
    });
    const user_id = <%- ctx.session.sessionUser.accountId %>;
    const files = JSON.parse(unescape('<%- escape(JSON.stringify(files)) %>'));
    const whiteList = JSON.parse('<%- JSON.stringify(whiteList) %>');
    $(function () {
        $('#btn_click').click(function () {
            $('#btn_type').val(2);
        });

        setFiles(files);

        function setFiles(files, _this = '#file-table tbody') {
            let filesHtml = '';
            const newFiles = files.map(file => {
                let showDel = false;
                if (file.uid === user_id) {
                    showDel = true
                }
                return {...file, showDel}
            })
            newFiles.forEach((file, idx) => {
                filesHtml += `<tr class="text-center">
                                        <td>${idx + 1}</td><td class="text-left"><a href="${file.filepath}" target="_blank">${file.filename}</a></td><td>${file.username}</td><td>${moment(file.upload_time).format('YYYY-MM-DD HH:mm:ss')}</td>
                                        <td>
                                            <div class="btn-group-table">
                                                ${file.viewpath ? `<a href="${file.viewpath}" target="_blank" class="mr-1"><i class="fa fa-eye fa-fw"></i></a>` : ''}
                                                <a href="/wap/message/download/file/${file.id}" class="mr-1"><i class="fa fa-download fa-fw"></i></a>
                                                ${file.showDel ? `<a href="javascript: void(0);" class="text-danger file-del mr-1" data-id="${file.id}"><i class="fa fa-trash-o fa-fw text-danger"></i></a>` : ''}
                                            </div>
                                        </td>
                                    </tr>`;
            });
            $(_this).html(filesHtml);
        }

        $('#msg-file input[type="file"]').change(function () {
            const files = Array.from(this.files);
            console.log(files);
            const valiData = files.map(v => {
                const ext = v.name.substring(v.name.lastIndexOf('.') + 1)
                return {
                    size: v.size,
                    ext
                }
            })
            const mid = parseInt($('#mid').val());
            if (validateFiles(valiData)) {
                if (files.length) {
                    const formData = new FormData()
                    files.forEach(file => {
                        formData.append('name', file.name)
                        formData.append('size', file.size)
                        formData.append('file', file)
                    })
                    postDataWithFile(`/dashboard/msg/${mid}/file/upload`, formData, function (result) {
                        setFiles(result);
                    });
                }
            }
            $('#msg-file input[type="file"]').val('');
        });

        $('body').on('click', '#msg-file .file-del', function () {
            const fid = $(this).data('id');
            const mid = parseInt($('#mid').val());
            deleteAfterHint(function () {
                postData(`/dashboard/msg/${mid}/file/del`, { id: fid }, function (result) {
                    setFiles(result);
                });
            }, '确认删除该文件？');
        });
    })
    /**
     * 校验文件大小、格式
     * @param {Array} files 文件数组
     */
    function validateFiles(files) {
        if (files.length > 10) {
            toastr.error('至多同时上传10个文件');
            return false
        }
        return files.every(file => {
            if (file.size > 1024 * 1024 * 30) {
                toastr.error('文件大小限制为30MB');
                return false
            }
            if (whiteList.indexOf('.' + file.ext.toLowerCase()) === -1) {
                toastr.error('请上传正确的格式文件');
                return false
            }
            return true
        })
    }
</script>