Vue Element UI uses upload to upload files

Use upload to upload files to the server

In uploading files, I encountered the need to limit uploading to xls/xlsx files. After reading the introduction of el-upload written in the official document and Baidu, there are two ways to limit the type of uploaded files.

1. Use the accept attribute to limit the upload type (the advantage is that other types of files will be filtered out when you click to upload)

<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>

2. Using before-upload, the advantage is that after you upload other types of files, there will be a prompt message, prompting you that the file type is wrong

<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
    },