el-upload が Excel ファイルのアップロードを実装する方法の詳細な説明

この記事では、Excel ファイルをアップロードする例を実装するための elemetUi コンポーネント-el-upload の関連情報を主に紹介します。この記事を通じて、このような機能を必要とする友人が参考にしていただければ幸いです。みんなを助けることができる。

elemetUiコンポーネント--el-uploadは、Excelファイルのアップロードの例を実装します

[要件] Excelファイルのアップロードを実装するには、サーバーにアップロードするときに、アップロードファイルインターフェイスをリクエストする前にパラメータを追加する必要があります。ファイルフォーマット判定を最初に行う必要があります。

【知識ポイント】

1. el-upload公式ドキュメントでは、主に以下の属性が使用されています:

data	optionalparameters、uploading時に含まれる追加パラメータ
name	オプションのパラメータ、アップロードされたファイルのフィールド名
before-upload	オプションのパラメータ、ファイルをアップロードする前のフック、パラメータはアップロードされたファイルです。 falseを返すか、Promiseを返して拒否された場合、アップロードは止まる。

2.文字列インターセプトのための分割

[分析]

<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-upload__tip">只能上传xls/xlsx文件</p>
          </el-upload>

        </el-form-item>
      </el-form>
    </p>
  </p>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: &#39;1&#39;,
          label: &#39;帅哥部&#39;
        }, {
          value: &#39;2&#39;,
          label: &#39;美女部&#39;
        }],
        fileName:&#39;&#39;,
        fileList:[],
        ruleForm: {
//          name: &#39;&#39;,
          isShow: &#39;0&#39;
        },
        form:{
          type:&#39;1&#39;
        },

      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },

      beforeAvatarUpload(file) {

        let Xls = file.name.split(&#39;.&#39;);

        if(Xls[1] === &#39;xls&#39;||Xls[1] === &#39;xlsx&#39;){
          return file
        }else {
          this.$message.error(&#39;上传文件只能是 xls/xlsx 格式!&#39;)
          return false
        }

      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleSuccess(res,file,fileList){

        if(res.code===20000){
          this.$message({
            message: &#39;上传成功！&#39;,
            type: &#39;success&#39;
          });
        }else {
          this.$message({
            message: res.msg,
            type: &#39;error&#39;
          });
        }

      }
    }
  }
</script>
<style scope>
  input[type="file"] {
    display: none;
  }
  .el-upload-list{
    width: 200px;
  }
  .el-select {
    width: 135px;
  }

</style>

関連推奨事項:

Excelファイルアップロード時にファイル内に画像があるかどうかを判断する方法

php Upload Excel ファイルを操作するときにファイルに画像があるかどうかを確認する方法

jquery-file-upload プログレスバー効果の共有例を使用したファイルアップロード

以上がel-upload が Excel ファイルのアップロードを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。