vue实现文件文件上传，与本博主下的springboot文件上传代码配套使用。

<template>
  <el-tabs v-model="activeName" @tab-click="findPage">
    <el-tab-pane label="文件列表" name="first" >
          <!--表格内容栏-->
          <qy-table ref="QyTable" :height="220" :width="width" permsEdit="sys:role:edit" permsDelete="sys:role:delete" :highlightCurrentRow="true" :stripe="false"
                    :data="pageResult" :columns="columns"
                    @findPage="findPage" @handleEdit="handleEdit" @handleShow="handleShow" >
          </qy-table>
    </el-tab-pane>
    <el-tab-pane label="上传" name="second">
      <div style="margin: 0 auto;width: 360px;text-align: center;">
          <el-upload
            style="text-align: left"
            class='image-uploader'
            :multiple='true'
            :auto-upload='false'
            ref="upload"
            list-type='text'
            :show-file-list='true'
            :before-upload="beforeUpload"
            :drag='true'
            :action="global.baseUrl+'/api/upload/uploadFile'"
            :limit="10"
            name="file"
            :on-exceed="handleExceed"
            :on-success="uploadSuccess"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
            :file-list="fileList"
            :headers="importHeaders"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip" style="text-align: center">只能上传10个文件，仅限text格式</div>
          </el-upload>
          <el-button style="margin-top: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
    import axios from 'axios';
    import QyTable from "@/views/Core/QyTable"
    import QyButton from "@/views/Core/QyButton"
    import TableTreeColumn from "@/views/Core/TableTreeColumn"
    import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
    export default {
        name: "UploadFile",
        props:{
            selectId:{
                type:String,
                default:0
            }
        },
        components:{
            QyTable,
            QyButton,
            TableTreeColumn,
            TableColumnFilterDialog
        },
        data() {
            return {
                activeName: 'first',
                uploadResData:[],
                visible : false,
                loading : false,
                menuStyle:{
                    isUserInfo:false,
                    isImageSetting:true,
                    isActivendicator:false,
                },
                src: '',
                mark: false,
                fileList:[],
                limitNum: 1,
                fileName: '',
                param:'',//表单要提交的参数
                importHeaders: {token: sessionStorage.getItem('token')},

                width:185,
                filters: {
                    name: ''
                },
                columns: [],
                pageRequest: { pageNum: 1, pageSize: 10 },
                pageResult: {},
                baseUrl: this.global.backupBaseUrl,
            }
        },

        methods: {
            // 处理表格列过滤显示
            initColumns: function () {
                this.columns = [
                    {prop:"filename", label:"文件名称", minWidth:120,sortable:'custom'},
                    {prop:"remark", label:"备注", minWidth:120},
                    {prop:"lasttime", label:"上传时间", minWidth:120,sortable:'custom', formatter:this.dateFormat}
                    // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
                    // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
                ]
                this.filterColumns = this.columns;
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            uploadSuccess(response, file, fileList) {
                if (response.code != '0000') {
                    this.$message.warning(response.message)
                } else {
                    this.uploadResData.push(response.data)
                    this.fileListUpload(response, file, fileList)
                }
            },
            handleRemove(file, fileList) {
                console.log(JSON.stringify(this.uploadResData))
                var deleteFilePath;
                try {
                    deleteFilePath = file.response.data.file.result;
                } catch (e) {
                    if (e.message.indexOf('file.response is undefined') > -1) {
                        deleteFilePath = file.file.result;
                    }
                }

                this.$api.uploadfile.fileload("deleteFilePath="+deleteFilePath).then((res) => {
                    this.editLoading = false
                    if (res.code == '0000') {
                        this.$message({message: '删除成功', type: 'success'})

                    } else {
                        this.$message({message: res.msg+",已删除选中文件", type: 'warning'})
                    }
                })
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`, '提示', {type: 'warning'});

            },
            // 上传文件之前的钩子
            beforeUpload(file) {
                const isText = file.type === 'application/vnd.ms-excel'
                const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                return (isText | isTextComputer)
            },
            // 上传文件个数超过定义的数量
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 10 个文件，请删除后继续上传`)
            },
            // 文件输出到磁盘之后上传到表里
            fileListUpload(response, file, fileList){
                const form = new FormData()
                // 文件对象
                form.append('originalfilename', response.data.file.originalfilename)
                form.append('result', response.data.file.result)
                form.append('totalSize', response.data.file.totalSize)
                form.append('selectId', this.selectId)

                this.$api.uploadfile.sysUploadFile(form).then((res)=>{
                    this.editLoading = false
                    if (res.code == '0000') {
                        this.$message.success("上传成功！")
                    } else {
                        this.$message({message: res.msg, type: 'warning'})
                    }
                },err=>{

                })


            },

            // 上传文件
            uploadFile(item) {
                const fileObj = item.file
                // FormData 对象
                const form = new FormData()
                // 文件对象
                form.append('file', fileObj)
                // form.append('comId', this.comId)
                this.$api.uploadfile.uploadFile(form).then((res) => {
                    if (res.code == 200) {
                        this.$message.success('文件：' + fileObj.name + '上传成功')
                        res.data.uid = fileObj.uid
                        this.uploadResData.push(res.data)
                    } else {
                        this.$message.warning(res.message)
                    }
                }, err => {

                })
            },

            // 获取分页数据
            findPage: function (data) {
                if(data !== null) {
                    this.pageRequest = data.pageRequest
                }
                const form = new FormData()
                form.append('selectId', this.selectId)
                this.$api.uploadfile.findUploadFileList(form).then((res) => {
                    this.pageResult = res.data
                    //this.findTreeData()
                }).then(data!=null?data.callback:'')
            },
            // 行按钮—— ——显示编辑界面
            handleEdit: function (params) {
                var roleId = params.row.roleId;
                this.footerDiv = true;
                this.titleName = "编辑角色信息";
                this.dialogVisible = true; //开启弹出框
                this.operation = true;
                this.dataForm = Object.assign({}, params.row);
                this.modelSrc="RoleEdit";
                var params = new URLSearchParams();
                params.append('roleId', roleId);
                setTimeout(()=>{
                    this.$refs.roleedit.findrolelist(params);
                },10);
            },

            handleShow: function (params) {
                var fileid = params.row.fileid;
                let token = sessionStorage.getItem('token');
               /* window.location.href = this.baseUrl+'/api/upload/downloadFile?fileid'+fileid*/
                const form = new FormData()
                form.append('fileid', fileid)


                axios.get(
                    `${this.baseUrl+'/api/upload/downloadFile'}`,
                    {
                        data: {form},
                        responseType: 'blob',
                        headers:{token},
                        onDownloadProgress: function (progressEvent) {
                            console.log(progressEvent)
                            // 在此处处理进度
                        }
                    }
                )
                    .then(res => {
                        const content = res
                        const blob = new Blob([content])
                        const fileName = '导出信息.xlsx'
                        if ('download' in document.createElement('a')) { // 非IE下载
                            const elink = document.createElement('a')
                            elink.download = fileName
                            elink.style.display = 'none'
                            elink.href = URL.createObjectURL(blob)
                            document.body.appendChild(elink)
                            elink.click()
                            URL.revokeObjectURL(elink.href) // 释放URL 对象
                            document.body.removeChild(elink)
                        } else { // IE10+下载
                            navigator.msSaveBlob(blob, fileName)
                        }
                    })
                                /* axios({
                                     method: 'post',
                                     url: this.baseUrl+'/api/upload/downloadFile',
                                     data: {
                                         form
                                     },
                                     headers:{token},
                                     responseType: 'blob'
                                 }).then(response => {
                                     this.download(response)
                                 }).catch((error) => {

                                 })*/

            },


            // 处理表格列过滤显示
            displayFilterColumnsDialog: function () {
                this.$refs.tableColumnFilterDialog.setDialogVisible(true)
            },
            // 处理表格列过滤显示
            handleFilterColumns: function (data) {
                this.filterColumns = data.filterColumns
                this.$refs.tableColumnFilterDialog.setDialogVisible(false)
            },


        },

        mounted() {
            this.initColumns()
        }

    }

</script>