projectmanager/app/download/view/index/add.html

<form class="layui-form page-content p-4">
    <h3 class="h3-title">上传软件</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray-2">软件名称<font>*</font>
            </td>
            <td>
                <input type="text" id="name" name="name" lay-verify="required" lay-reqText="请输入软件名称"
                    placeholder="请输入软件名称" class="layui-input" value="" />
            </td>
            <td class="layui-td-gray-2">软件分类
            </td>
            <td>
                <select name="cid" id="cid" lay-verify="" lay-reqText="请选择软件分类" class="layui-select" lay-search=""
                    lay-filter="cid"></select>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">软件版本
            </td>
            <td>
                <input type="text" name="version" lay-reqText="请输入软件版本" placeholder="请输入软件版本" class="layui-input"
                    value="" />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">上传文件</td>
            <td>
                <button type="button" class="layui-btn demo-class-accept" id="Uploadfiles">
                    <i class="layui-icon layui-icon-upload"></i>
                    上传文件
                </button>
            </td>
            <td class="layui-td-gray-2">文件路径</td>
            <td>
                <input type="text" name="path" placeholder="文件路径" class="layui-input" value="" readonly />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">文件类型
            </td>
            <td>
                <input type="text" name="type" class="layui-input" value="" readonly />
            </td>
            <td class="layui-td-gray-2">文件大小</td>
            <td>
                <input type="text" name="size" class="layui-input" value="" readonly />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">下载链接
            </td>
            <td>
                <input type="text" name="download_url" lay-reqText="请输入下载链接" placeholder="请输入下载链接" class="layui-input"
                    value="" />
            </td>
            <td class="layui-td-gray-2">分享码</td>
            <td>
                <input type="text" name="download_code" lay-reqText="请输入分享码" placeholder="请输入分享码" class="layui-input"
                    value="" />
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray-2">软件描述
            </td>
            <td colspan="4">
                <textarea name="description" lay-reqText="请输入" placeholder="请输入软件描述" class="layui-textarea"
                    value=""></textarea>
            </td>
        </tr>
    </table>

    <div class="pt-1">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform" id="ID-upload-demo-action">
            立即提交
        </button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<script>
    layui.use(["form", "layer", "upload"], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        form.render();

        // 软件分类加载
        fetch("/download/index/catelist")
            .then((response) => response.json())
            .then((result) => {
                var select = document.getElementById('cid');
                select.innerHTML = '<option value="">请选择软件类别</option>';

                if (result.code === 0 && Array.isArray(result.data)) {
                    results = result.data;
                    results.forEach((item) => {
                        var option = document.createElement("option");
                        option.value = item.id;
                        option.innerText = item.name;
                        select.appendChild(option);
                    });
                } else {
                    console.error("意外的响应格式:", result);
                }

                form.render("select");
            })
            .catch((error) => {
                console.error("Error:", error);
            });

        // 上传文件逻辑
        upload.render({
            elem: '#Uploadfiles', // 上传按钮
            url: '/api/index/upload_files', // 上传接口
            accept: 'file', // 接收任意文件类型
            exts: 'exe|zip|rar|7z', // 限制文件类型
            auto: true, // 自动上传
            done: function (res) {
                if (res.code === 200) {
                    // 上传成功后，将返回的文件路径设置到输入框中
                    var filenameWithoutExtension = res.filename.replace(/\.[^/.]+$/, "");
                    document.getElementById('name').value = filenameWithoutExtension;
                    document.querySelector('input[name="path"]').value = res.filepath;
                    document.querySelector('input[name="size"]').value = (res.file_size / (1024 * 1024)).toFixed(2) + ' MB';
                    document.querySelector('input[name="type"]').value = res.file_extension;
                    layer.msg('文件上传成功');
                } else {
                    layer.msg('文件上传失败：' + res.msg);
                }
            },
            error: function () {
                layer.msg('上传接口异常');
            }
        });

        // 提交表单逻辑
        form.on("submit(webform)", function (data) {
            // 验证文件路径和下载链接是否填写
            var path = document.querySelector('input[name="path"]').value;
            var downloadUrl = document.querySelector('input[name="download_url"]').value;

            if (!path && !downloadUrl) {
                layer.msg("请先上传文件或填写下载链接");
                return false; // 阻止提交
            }

            // 提交表单数据
            fetch("/download/index/add", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(data.field), // 仅提交表单字段
            })
                .then((response) => response.json())
                .then((result) => {
                    layer.msg(result.msg);
                    if (result.code === 0) {
                        setTimeout(function () {
                            window.history.back(); // 返回上一页
                        }, 1500);
                    }
                })
                .catch((error) => {
                    console.error("Error:", error);
                    layer.msg("提交失败，请重试");
                });

            return false; // 阻止默认表单提交
        });
    });
</script>