elemetUi 組件--el-upload

【需求】實現上傳Excel文件，在上傳到服務器時，還要附加一個參數，在請求上傳文件接口前，先要進行文件格式判斷。

【知識點】

　　1、el-upload 官方文檔中，主要用到了以下屬性：

data	可選參數, 上傳時附帶的額外參數
name	可選參數, 上傳的文件字段名
before-upload	可選參數, 上傳文件之前的鈎子，參數為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。

 

　　2、split進行字符串截取

【分析】

<template>
    <div class="panel admin-panel">
        <div class="panel-head" id="add"><strong><span class="el-icon-edit"></span><span class="title">上傳數據</span></strong></div>
        <div class="body-content">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="form uploadform">
                <el-form-item label="部門" prop="name">
                    <el-select v-model="form.type" placeholder="請選擇" style="width: 135px">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>

                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="http://10.1.20.218:8088/gnh-webadmin-platfrom/api/v1/sendSalaryBillGeinihua"
                            :on-preview="handlePreview"
                            :before-upload="beforeAvatarUpload"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload = 'false'
                            :on-success = 'handleSuccess'
                            :data="form"
                            name="salaryBill">
                        <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
                        <div slot="tip" class="el-upload__tip">只能上傳xls/xlsx文件</div>
                    </el-upload>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: [{
                    value: '1',
                    label: '帥哥部'
                }, {
                    value: '2',
                    label: '美女部'
                }],
                fileName:'',
                fileList:[],
                ruleForm: {
//                    name: '',
                    isShow: '0'
                },
                form:{
                    type:'1'
                },

            };
        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },

            beforeAvatarUpload(file) {

                let Xls = file.name.split('.');

                if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
                    return file
                }else {
                    this.$message.error('上傳文件只能是 xls/xlsx 格式!')
                    return false
                }

            },
            handleRemove(file, fileList) {
            },
            handlePreview(file) {
            },
            handleSuccess(res,file,fileList){

                if(res.code===20000){
                    this.$message({
                        message: '上傳成功！',
                        type: 'success'
                    });
                }else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }

            }
        }
    }
</script>
<style scope>
    input[type="file"] {
        display: none;
    }
    .el-upload-list{
        width: 200px;
    }
    .el-select {
        width: 135px;
    }

</style>