Comment télécharger des fichiers Excel avec el-upload

Cette fois, je vais vous montrer comment el-upload télécharge des fichiers Excel, et quelles sont les précautions pour qu'el-upload télécharge des fichiers Excel. Voici un cas pratique, jetons un coup d'œil.

Comment el-upload télécharge des fichiers Excel

Composant elemetUi - el-upload implémente un exemple de téléchargement de fichiers Excel

[Exigence] Pour mettre en œuvre le téléchargement de fichiers Excel, lors du téléchargement sur le serveur, un paramètre doit être ajouté Avant de demander l'interface de téléchargement du fichier, le format du fichier doit d'abord être déterminé.

【Points de connaissances】

 1. Dans la documentation officielle d'el-upload, les attributs suivants sont principalement utilisés :

data	可选参数, 上传时附带的额外参数
name	可选参数, 上传的文件字段名
before-upload	可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

 2. Split pour interception de chaînes

[Analyse]

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!