Vue Element UI 使用upload上传文件

使用upload上传文件到服务器中

在上传文件中，遇到了想要限制成上传xls/xlsx文件的需求，看了官方文档中写的el-upload介绍以及百度，现有两种方式限制上传文件类型。

一、使用accept属性，限制上传类型（好处是，在点击上传的时候会将其他类型的文件过滤掉）

<el-upload
	class="upload-demo"
	drag
	action="（服务器地址）"
	:on-change="handleChange"
	:headers="headers"
	:data="listData"
	name="list"
	ref="upload"
	accept=".xls,.xlsx"
	>
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">
		将xls/xlsx文件拖到此处，或<em>点击上传</em>
	</div>
</el-upload>

二、使用before-upload，好处是在你将其他类型的文件上传后，会有提示信息，提示你文件类型不对

<el-upload
              class="upload-demo"
              drag
              action="（服务器地址）"
              :on-change="handleChange"
              :headers="headers"
              :data="listData"
              name="list"
              ref="upload"
              :before-upload="handleBefore"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将xls/xlsx文件拖到此处，或<em>点击上传</em>
              </div>
 			</el-upload>

js

handleBefore(file) {
    
    
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg == 'xls'
      const extension2 = testmsg == 'xlsx'
      if (!extension && !extension2) {
    
    
        this.$message({
    
    
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning'
        })
      }
      return extension || extension2
    },