TrBlog
0%

文件上传

Posted on Edited on In

文件上传

多文件批量上传问题，layui下的实现。

layui底层只支持单个文件上传，实现多文件统一上传并在全部上传后生成事件

前端html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="layui-form-item">
                        <!--                <label class="layui-form-label">添加附件：</label>-->
                        <input type="hidden" id="filePath" name="filePath"/>
                        <div class="layui-input-inline shangc_txt" style="margin-top: 5px;padding-left: 10px;width: 100%">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="upload-svg-btn">
                                    <i class="layui-icon">&#xe67c;</i>选择文件
                                </button>
                                <div class="layui-upload-list" style="border: 1px solid #D9D9D9;width: 98%">
                                    <table class="layui-table" style="padding:0px;margin: 0px;overflow-y: auto;margin-top: 2px;">
                                        <thead>
                                        <tr>
                                            <th>文件名</th>
                                            <th>文件大小</th>
                                            <th>文件状态</th>
                                            <th>文件操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="upload-list"></tbody>
                                    </table>
                                </div>
                                <button type="button" class="layui-btn layui-btn-disabled" id="upload">上传</button>
                            </div>
                        </div>
                    </div>

upload successful

前端js

使用了layui的文件上传，在上传过程中手动拼接上传文件的显示和操作ui，done为每个文件上传后的调用，alldone为所有文件上传后的调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// 生成上传task
    var uploadTaskForm = function (uploadForm) {
        $.ajax({
            url: applicationUtil.gatewayURL + '/pssc-graph/graph/generate-task',
            data: uploadForm,
            type: "post",
            contentType: "application/json",
            dataType: "JSON",
            success: function (data) {
                console.log(data.code);
                // layer.msg(data.msg);
            },
            error: function (data) {
                console.log(data.msg);
            }
        });
    };
//上传svg和cim文件渲染
    var array = new Array();
    var list_view = $('#upload-list');
    var taskForm = {};
    var uploadListIns = upload.render({
        elem: '#upload-svg-btn' //绑定元素
        , url: applicationUtil.gatewayURL + '/pssc-graph/graph/upload/' //上传接口
        , accept: 'file'
        , exts: 'svg|xml'
        , auto: false
        , multiple: true
        , number: 2
        , bindAction: '#upload'
        , choose: function (obj) {
            //将每次选择的文件追加到文件队列
            var files = this.files = obj.pushFile();
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                if ($("#upload").hasClass("layui-btn-disabled")) {
                    $("#upload").removeClass("layui-btn-disabled")
                }
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td>' + file.name + '</td>'
                    , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                    , '<td>等待上传</td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-min demo-reload layui-hide">重传</button>'
                    , '<button class="layui-btn layui-btn-min demo-delete layui-btn-danger">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));
                // 单个重传
                tr.find('.demo-reload').on('click', function () {
                    obj.upload(index, file);
                });
                // 删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index];
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = '';
                });
                list_view.append(tr);
            });
        }
        , allDone: function (res) {
            $("#filePath").val(array.toString());
            $("#upload").addClass("layui-btn-disabled");
            // console.log("task form is " + JSON.stringify(taskForm));
            // 文件全部上传完毕 执行生成task任务
            uploadTaskForm(JSON.stringify(taskForm));
        }
        , done: function (res, index, upload) {
            //上传完毕回调
            // 每次回调存储回调文件信息
            if (res.data.svgFileName != '-1') {
                taskForm.svgFileName = res.data.svgFileName;
                taskForm.svgFileId = res.data.svgFileId;
            }
            if (res.data.cimFileName != '-1') {
                taskForm.cimFileName = res.data.cimFileName;
                taskForm.cimFileId = res.data.cimFileId;
            }
            if (res.code == 0) {
                array.push(res.filePath);
                var tr = list_view.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color:#5FB878;">上传成功</span>');
                // tds.eq(3).html(''); //清空
                return delete this.files[index];
            }
            this.error(index, upload);
        }
        , error: function (index, upload) {
            //请求异常回调
            var tr = list_view.find('tr#upload-' + index)
                , tds = tr.children();
            tds.eq(2).html('<span style="color:#FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });

后端实现

后端获取post方式负载的文件后将文件流压缩位字符流存入数据库即可，后台的mapper和service为正常操作不做展示，注意的事这是单文件接口，layui多次调用此接口实现多文件上传。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
     * 由于前端使用的框架底层只支持单次文件上传，业务需求同时上传两个文件
     * 解决方案二：抽离task生成，前端配置alldone,完成后调用后台task接口
     *
     * @param file
     * @return
     */
    @PostMapping("/upload")
    @ApiOperation(value = "单次上传图模文件，svg和cim", notes = "单次上传图模文件，svg和cim")
    public CommonResult<GenerateTaskForm> uploadGraphFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            log.error("所传文件为空");
            return null;
        }
        // 文件uuid
        String fileId = UUID.randomUUID().toString().replace("-", "");
        // 返回前端的文件名
        String fileName = file.getOriginalFilename();
        GenerateTaskForm form = null;
        try {
            //将获取的文件名和文件内容存入数据库T-PW-files里
            int result = IGraphService.insertFileName(fileId, fileName, "123", ZipUtil.compress(file.getBytes()));
            log.info("插入文件成功 result code:[{}], 文件名:[{}], uuid:[{}]", result, fileName, fileId);
            if (result > -1) {
                if (fileName.toLowerCase().lastIndexOf(".svg") != -1)
                    form = new GenerateTaskForm(fileName, fileId, "-1", "-1");
                else if (fileName.toLowerCase().lastIndexOf(".xml") != -1)
                    form = new GenerateTaskForm("-1", "-1", fileName, fileId);
            }

        } catch (IOException e) {
            log.error("获取文件字节流失败 错误信息[{}]", e.getMessage());
        }
        return new CommonResult<>(0, "", form);
    }

Welcome to my other publishing channels