Vue：使用elementUI upload组件上传excel文件

 

<template>
  <div>
	  <el-upload drag
	      action="" 
          :http-request="upload" 
          :before-upload="beforeUploadFile">
          <el-button type="primary">上传 <i class="el-icon-upload2"></i></el-button>
  	  </el-upload>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        fileList: [],   // excel文件列表
      }
    },
    methods:{
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log('before upload')
      console.log(file)
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      let size = file.size / 1024 / 1024
      if (extension !== 'xlsx') {
        this.$message.warning('只能上传后缀是.xlsx的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M')
      }
    },
    // 上传
    upload(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      const url = '/v_upload_file/'
      this.axios
        .post(url, formData)
        .then((data) => {
          console.log('上传图片成功')
        })
        .catch((response) => {
          console.log('图片上传失败')
        })
      },
    }
  }
</script>