How to upload Excel files with el-upload

This time I will show you how el-upload uploads Excel files, and what are the precautions for el-upload to upload Excel files. The following is a practical case, let's take a look.

How el-upload uploads Excel files

elemetUi component--el-upload implements an example of uploading Excel files

[Requirement] To implement the upload of Excel files, when uploading to the server, a parameter must be appended. Before requesting the upload file interface, the file format must be determined first.

【Knowledge Points】

 1. In the official documentation of el-upload, the following attributes are mainly used:

data	Optional parameters, additional parameters included when uploading
name	Optional parameter, uploaded file field name
before-upload	Optional parameter, the hook before uploading the file. The parameter is the uploaded file. If it returns false or returns Promise and is rejected, the upload will stop.

  2. Split for string interception

[Analysis]

<template>
  <p class="panel admin-panel">
    <p class="panel-head" id="add"><strong><span class="el-icon-edit"></span><span class="title">上传数据</span></strong></p>
    <p class="body-content">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="form uploadform">
        <el-form-item label="部门" prop="name">
          <el-select v-model="form.type" placeholder="请选择" style="width: 135px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
              class="upload-demo"
              ref="upload"
              action="http://10.1.20.218:8088/gnh-webadmin-platfrom/api/v1/sendSalaryBillGeinihua"
              :on-preview="handlePreview"
              :before-upload="beforeAvatarUpload"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload = &#39;false&#39;
              :on-success = &#39;handleSuccess&#39;
              :data="form"
              name="salaryBill">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <p slot="tip" class="el-uploadtip">只能上传xls/xlsx文件</p>
          </el-upload>
        </el-form-item>
      </el-form>
    </p>
  </p>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '1',
          label: '帅哥部'
        }, {
          value: '2',
          label: '美女部'
        }],
        fileName:'',
        fileList:[],
        ruleForm: {
//          name: '',
          isShow: '0'
        },
        form:{
          type:'1'
        },
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      beforeAvatarUpload(file) {
        let Xls = file.name.split('.');
        if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
          return file
        }else {
          this.$message.error('上传文件只能是 xls/xlsx 格式!')
          return false
        }
      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleSuccess(res,file,fileList){
        if(res.code===20000){
          this.$message({
            message: '上传成功！',
            type: 'success'
          });
        }else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }
    }
  }
</script>
<style scope>
  input[type="file"] {
    display: none;
  }
  .el-upload-list{
    width: 200px;
  }
  .el-select {
    width: 135px;
  }
</style>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to upload Excel files with el-upload. For more information, please follow other related articles on the PHP Chinese website!