上传word、excel、pdf的vue模板

在vue框架中：
https://mp.weixin.qq.com/s/u5RXumT3NPtayq--krRKKg
在mako框架中：

<%inherit file="/base.html"/>

<%block name="content">
<div id="app">
    <form>
        <input type="file" name="fileup" id="uploadEventFile" @change="fileChange($event)" style="display:none"/>
    </form>
    <i-button @click="importData($event)" type="primary">导入</i-button>
    <span>{{ file_name }}</span>
</div>    
</%block>
<script>
    Vue.prototype.$http = axios;
    Vue.use(iview);
    new Vue({
        el: '#app',
        data() {
            return {
                file_name: '',
                file_path 
            }
        },
        methods: {
            importData(event) {
                event.preventDefault();
                $('#uploadEventFile').trigger('click')
            },
            //上传excel和word都可以，excel是(.xls,.XLS),word是(.docx,.DOCX),pdf是(.pdf,.PDF)
            fileChange(el) {
                el.preventDefault();//取消默认行为
                let uploadEventFile = $('#uploadEventFile').val();
                this.file = el.target.files[0];
                if (uploadEventFile == '') {
                    alert('请择excel,再上传');
                } else if (uploadEventFile.lastIndexOf('.xls') > 0 || uploadEventFile.lastIndexOf('.XLS') > 0) {
                    let formData = new FormData();
                    // 向 formData 对象中添加文件
                    formData.append('file', this.file);
                    let config = {
                        // 一定要定义头
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
                    // url为对应的后端接口
                    this.$http.post('${SITE_URL}upload_file/', formData, config).then(res => {
                        alert('上传成功,路径为：' + res.data.data.Path)
                        this.file_name = this.file.name
                        this.file_path = res.data.data.Path
                    })
                } else {
                    alert('只能上传excel文件');
                }
            },
        },
        mounted() {

        }
    })
</script>
<style></style>