ElementUI’s official Upload component document is availableClick here to view the. The following page is displayed, supporting the secondary confirmation uploading of filesThe demo uses Excel as an example. If you want to support other formats, you can modify the accept value. The codes are as follows:

<template>
  <div>
	  <el-upload drag
	       :limit=limitNum
	       :auto-upload="false"
	       accept=".xlsx"
	       :action="UploadUrl()"
	       :before-upload="beforeUploadFile"
	       :on-change="fileChange"
	       :on-exceed="exceedFile"
	       :on-success="handleSuccess"
	       :on-error="handleError"
	       :file-list="fileList">
	    <i class="el-icon-upload"></i>
	    <div class="el-upload__text">Drag the file here, or<em>Click on the upload</em></div>
	    <div class="el-upload__tip" slot="tip">Only XLSX files can be uploaded, and the maximum size is 10 MB</div>
  	</el-upload>
  <br/>
  <el-button size="small" type="primary" @click="uploadFile">Immediately upload</el-button>
  <el-button size="small">cancel</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        limitNum: 1.// The maximum number of simultaneous uploads allowed when uploading Excell
        fileList: [].// List of excel files}},methods: {// The number of files exceeds the limit
      exceedFile(files, fileList) {
        this.$message.warning('Can only chooseThe ${this.limitNum}Three files are currently selected${files.length + fileList.length}A `);
      },
      // Hook for file state changes
      fileChange(file, fileList) {
        console.log(file.raw);
        this.fileList.push(file.raw) ;
        console.log(this.fileList);
      },
      // The hook before uploading the file. The upload is stopped if false or a Promise is returned and reject is rejected
      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('You can only upload files with a.xlsx suffix.');
        }
        if(size > 10) {
          this.$message.warning('File size must not exceed 10M'); }},// Hook for successful file upload
      handleSuccess(res, file, fileList) {
        this.$message.success('File uploaded successfully');
      },
      // Hook for file upload failure
      handleError(err, file, fileList) {
        this.$message.error('File upload failed');
      },
      UploadUrl:function(){
       // Because the action parameter is mandatory, when we use the second confirmation to upload the file, the API will report 404 because there is no parameter. Therefore, we set the action parameter to a method that returns nothing, so as to avoid throwing errors
        return ""
      },
      uploadFile() {
        if (this.fileList.length === 0) {this.$message.warning('Please upload file');
        } else {
          let form = new FormData();
          form.append('file'.this.fileList);
          this.$axios({
            method:"post".url: "/statistical/uploadbug".headers: {'Content-type': 'multipart/form-data'
            },
            data:form
          }).then(
            res= >{},err= >{}); }}}}</script>

<style scoped>

</style>

Copy the code

If you have any questions, please leave a comment at the bottom of this article. I will add more detailed notes according to the questions.