peko-admin-web/src/views/QiniuUploadAdminView.vue

<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <!-- .content -->
                <div id="table"></div>
                <div id="toolbar">
                    <br />
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="updateImgs" class="btn btn-sm btn-primary">上传文件</button>
                    <h3 id="urlInfo"></h3>
                    <br />
                </div>
            </div>
        </div>
    </section>

    <div class=" modal fade" id="fileUpload" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel1">上传文件</h4>
                </div>
                <div class="modal-footer" style="height: 20%">
                    <span>上传文件</span>
                    <!--<input type="file" name="file" id="uploadFile">-->
                    <input type="file" name="logoFile1" id="logoFile1" onchange="setFiles(this);" style="display:inline;"
                        multiple>
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
                    <!--<button type="button" class="btn btn-primary" id="upload">上传七牛</button>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "QiniuUploadAdminView",
    setup() {

        function setFiles(obj) {
            $("#confirmMsg").text("正在上传，请稍后");
            $("#confirmModal").modal('show');
            var f = $(obj).val();
            if (f == null || f == undefined || f == '') {
                return false;
            }
            var filePaths = $(obj)[0].files;
            var num = filePaths.length;
            var data = new FormData();
            for (var i = 0; i <= num - 1; i++) {
                var file = $(obj)[0].files[i];
                data.append('file_' + i, file);
            }
            $.ajax({
                type: "POST",
                url: "/admin/qiniu/uploadPatch",
                data: data,
                cache: false,
                contentType: false,    //不可缺
                processData: false,    //不可缺
                dataType: "json",
                success: function (res) {
                    $("#logoFile1").val("");
                    $("#confirmModal").modal('hide');
                    $("#fileUpload").modal('hide');
                    console.log(res)
                    if (res.code == 200) {
                        $("#tipMsg").text("上传成功");
                        $("#tipModal").modal('show');
                        buildResult(res.data);
                    } else {
                        $("#tipMsg").text("上传失败.");
                        $("#tipModal").modal('show');
                    }
                }
            });
        }
        window.setFiles = setFiles;
        return {
            setFiles
        };
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $("#updateImgs").click(function () {
                $("#uploadFile").val("");
                $("#fileUpload").modal('show');
            });

            $("#upload").click(function () {
                $.ajaxFileUpload({
                    fileElementId: 'uploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                    url: "/admin/qiniu/upload", //后台方法的路径
                    type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                    dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                    secureuri: false,   //是否启用安全提交，默认为false。
                    async: true,   //是否是异步
                    success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                        console.log(json)
                        if (json.flag) {
                            $("#urlInfo").html(json.url);
                            $("#tipMsg").text("上传成功");
                            $("#tipModal").modal('show');
                        }
                        else {
                            $("#tipMsg").text("上传失败.");
                            $("#tipModal").modal('show');
                        }
                        $("#faceJsonImgsUpload").modal('hide');
                    },
                    error: function (data, status, e) {  //提交失败自动执行的处理函数。
                        console.error(e);
                        $("#tipMsg").text("上传失败");
                        $("#tipModal").modal('show');
                    }
                });

            });
        }
    },
};

function buildResult(data) {
    var $urlInfo = $('#urlInfo');
    for (var i = 0; i < data.length; i++) {
        var $p = $('<p />');
        $p.html(data[i]);
        $urlInfo.append($p);
    }
}
</script>

<style scoped>
 .bar1, .bar2 {
        margin-bottom: 10px;
    }

    label.col-sm-1 {
        padding: 0;
        line-height: 30px;
        text-align: right;
        /*padding-right: 4px;*/
    }

    label.col-sm-1 {
        padding: 0;
        line-height: 30px;
        text-align: right;
        /*padding-right: 4px;*/
    }

    input, select {
        margin-left: 8px;
        margin-right: 8px;
    }

    .button-wrapper {
        margin-top: 10px;
    }

    .record {
        margin-top: 10px;
    }

    .record .title {
        font-size: 16px;
    }

    .toggle-group {
        display: none;
    }

    .tips {
        font-size: 13px;
        color: red;
    }

    .opt-group .col-sm-7 {
        text-align: left;
    }
</style>