Element+vue.js 实现文件模板下载，和Upload 上传文件带参数

一开始自己也是第一次用Element+vue.js 做上传文件功能，走了点弯路。经过功能实现后整合了一下，给需要的朋友们参考一下。

功能页面如下：

下面是此功能的完整代码：

HTML：（样式由于是文件引用，这里没有给，亲们自己有自己喜欢的CSS）

<div id="uploadFile">

    <input type="hidden" id="hidSid" value="@ViewBag.sid" />

    <div>

        <span style="color:red">*</span><span class="w60">参数</span>
    </div>

    <div style="margin-left:3px;">
        <el-input v-cloak class="w160" v-model="searchData.parameter"></el-input>
    </div>

    <div class="inline-block" style="line-height: 38px;">
        <el-upload class="upload-demo"
                   style="float:left;"
                   v-bind:action="uploadPath"
                   v-bind:auto-upload="true"
                   v-bind:before-upload="beforeUpload"
                   v-bind:on-success="uploadSuccess"
                   v-bind:on-error="uploadFail"
                   v-bind:data="paramsData"
                   v-bind:limit="1"
                   v-bind:show-file-list="false"
                   v-bind:file-list="fileList">

            <el-button v-cloak style="160px;" type="warning">上传文件</el-button>
        </el-upload>

        <el-button type="text" style="margin-left:20px;padding-top:18px;" v-on:click="downloadTemplate">文件模板下载</el-button>
    </div>

</div>

解释说明：

action   必选参数，上传的地址 string

auto-upload     是否在选取文件后立即进行上传 boolean

before-upload     上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
on-success    文件上传成功时的钩子 function(response, file, fileList)
on-error      文件上传失败时的钩子 function(err, file, fileList)
data      上传时附带的额外参数 object
limit           最大允许上传个数 number
show-file-list   是否显示已上传文件列表 boolean
file-list         上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

Script:这里用的是vue.js

var vueIncomePay = new Vue({
    el: '#uploadFile',
    data: {
        sid: document.getElementById('hidSid').value,
        //上传Excel
        uploadPath: '/FM/Account/UploadBathCheck?sid=' + document.getElementById('hidSid').value,
        //上传文件格式
        fileTypeList: ['xls', 'xlsx'],
        //上传文件大小 2M
        fileSize: 2,
        fileList: [],
        },
         searchData: {
            IsDetail: false,
            //参数
            parameter:'',
            }
        },
     methods: {

  beforeUpload: function (file) {
            var __self = this;
            var result = true;
            
            //参数不能为空验证
            if (__self.searchData.parameter == "") {
                __self.$message({ message: '请输入参数！', type: 'warning' });
                return false;
            }
            var type = file.name.substring(file.name.indexOf('.') + 1, file.name.length).toLowerCase();
            var isExcel = __self.fileTypeList.indexOf(type) != -1;
            var isLtSize = file.size / 1024 / 1024 < __self.fileSize;

            if (!isExcel) {
                __self.$message.error('上传文件只能是 ' + __self.fileTypeList.join(',') + ' 格式');
            }
            if (!isLtSize) {
                __self.$message.error('上传文件大小不能超过 ' + __self.fileSize + 'M');
            }
            result = isExcel && isLtSize;
            __self.reMsg = '';
            __self.errorList = [];
            if (result) {
                __self.loading = __self.$loading({
                    lock: true,
                    text: '导入数据中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            }
            return result;
        },

        uploadSuccess: function (data, file, fileList) {
            var __self = this;
            __self.resultMsg = '';
            __self.loading.close();
            if (data == null) {
                __self.$message.error('导入失败');
                return;
            } else {
                console.log(JSON.stringify(data));
                __self.fileList = [];
                if (data.isSucc) {
                    __self.$message.success(data.message);
                } else {
                    __self.$message.error(data.message);
                }
                console.log(__self.errorList);
            }
        },

        uploadFail: function (err) {
            this.$message.error('导入失败');
            console.log(JSON.stringify(err));
            return;
        },
         },

  //被带入到后台的参数
  computed: {
        paramsData: function () {
            var __self = this;
            var params = {
                parameter: __self.searchData.parameter,
            };
            return params;
        }
    }

至于后台代码，本人是MVC。每个人用的都不一样，方法代码我就不贴了

如果有什么不明白的可以找我

点击选择了上传的文件才验证非空，这是一个不好的体验，有哪位大佬有更好的办法，还请不吝赐教，在此谢过！