el-upload怎麼上傳Excel文件

這次帶給大家el-upload怎麼上傳Excel文件，el-upload上傳Excel文件的注意事項有哪些，下面就是實戰案例，一起來看一下。

el-upload怎麼上傳Excel檔案

elemetUi 元件--el-upload實作上傳Excel檔案的實例

【需求】實作上傳Excel文件，上傳到伺服器時，還要附加一個參數，在請求上傳文件介面前，先要進行文件格式判斷。

【知識點】

#   1、el-upload 官方文件中，主要用到了以下屬性：

data	可選參數, 上傳時附帶的額外參數
# name	可選參數, 上傳的檔案欄位名稱
# before-upload	可選參數, 上傳文件之前的鉤子，參數為上傳的文件，若返回 false 或返回 Promise 且被 reject，則停止上傳。

  2、split進行字串截取

【分析】

<template>
  <p>
    </p>
<p><strong><span></span><span>上传数据</span></strong></p>
    <p>
      <el-form>
        <el-form-item>
          <el-select>
            <el-option>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload>
            <el-button>选取文件</el-button>
            <el-button>上传到服务器</el-button>
            <p>只能上传xls/xlsx文件</p>
          </el-upload>
        </el-form-item>
      </el-form>
    </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>
  input[type="file"] {
    display: none;
  }
  .el-upload-list{
    width: 200px;
  }
  .el-select {
    width: 135px;
  }
</style>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是el-upload怎麼上傳Excel文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！