Elment 上传组件

宜昌李国勇

已于 2023-03-01 23:41:06 修改

阅读量94

点赞数

分类专栏：前端前段文章标签：算法 Powered by 金山文档

于 2023-03-01 23:06:54 首次发布

本文链接：https://blog.csdn.net/weixin_44568816/article/details/129291937

版权

前段同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

1.上传Excel

<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>极客健康</title>
    <meta name="description" content="极客健康">
    <meta name="keywords" content="极客健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">

    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
                        <!--
                            el-upload组件
                            1.action属性：上传后url接口处理
                            2.name属性：后端Controller方法形参名称必须与之一致
                            3.on-success属性：上传成功时回调的钩子函数
                            4.before-upload属性：在上传之前调用的钩子函数
                        -->
                        <el-upload action="/ordersetting/upload"
                                   name="excelFile"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>

                </el-card>

            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            today:new Date(),//当前日期
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
        },
        created: function () {//在vue初始化时调用
            this.initData(null);
        },
        methods: {

            //上传之前进行文件格式校验
            beforeUpload(file){
                const isXLS = file.type === 'application/vnd.ms-excel';
                if(isXLS){
                    return true;
                }
                const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是xls或者xlsx格式!');
                return false;
            },
            //上传成功提示
            handleSuccess(response, file) {
                console.log(response, file);
                if(response.flag){
                    this.$message.success(response.message);
                }else{
                    this.$message.error(response.message);
                }
            },

        }
    })
</script>
</html>

2.上传视频（如果进不了Controller 检查C盘TomCat Serve.xml+SpringMVC 中多部件解析器的大小）

<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>极客健康</title>
    <meta name="description" content="极客健康">
    <meta name="keywords" content="极客健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">

    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
                        <!--
                            el-upload组件
                            1.action属性：上传后url接口处理
                            2.name属性：后端Controller方法形参名称必须与之一致
                            3.on-success属性：上传成功时回调的钩子函数
                            4.before-upload属性：在上传之前调用的钩子函数
                        -->
                        <el-upload action="/video/uploadVideo"
                                   name="file"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>

                </el-card>

            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{

        },
        created: function () {//在vue初始化时调用

        },
        methods: {

            //上传之前进行文件格式校验
            beforeUpload(file) {
                var fileSize = file.size / 1024 / 1024 < 500;
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
                    layer.msg("请上传正确的视频格式");
                    return false;
                }
                if (!fileSize) {
                    layer.msg("视频大小不能超过500MB");
                    return false;
                }
            },

            //上传成功提示
            handleSuccess(response, file) {
                console.log(response, file);
                if(response.flag){
                    this.$message.success(response.message);
                }else{
                    this.$message.error(response.message);
                }
            },

        }
    })
</script>
</html>