vue上传文件组件

<template>
  <div>
    <el-upload
    class="upload-demo"
    ref="upload"
    :on-change="handleChange"   {/*文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用*/}
    :file-list="fileList"
    :limit="1"         {/*控制上传最大数量1*/}
    drag
    action="http://localhost:8077/"   {/*上传到后台的接口地址*/}
    accept=".xlsx,.xls"    {/*支持的文件类型*/}
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传Excel文件，格式xls、xlsx</div>
    </el-upload>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
  </div>
</template>
<script>
export default {
  name: 'submitUpload',
  data(){
    return{
      fileList:[]
    }
  },
  methods: {
    
    submitUpload:function(){
      // submit()手动上传文件列表
      this.$refs.upload.submit()
      
    },
    handleChange:function(file,fileList) {
      
      this.fileList=[{name:'已上传文件'}]
    
      }
  }
}
</script>

前端效果如图

image.png