收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

elemetUi 組件--el-upload實現上傳Excel文件的實例

elemetUi 組件--el-upload實現上傳Excel文件的實例

【需求】實現上傳Excel文件,在上傳到服務器時,還要附加一個參數,在請求上傳文件接口前,先要進行文件格式判斷。

查看圖片

【知識點】

  1、el-upload 官方文檔中,主要用到了以下屬性:

data 可選參數, 上傳時附帶的額外參數 name 可選參數, 上傳的文件字段名 before-upload 可選參數, 上傳文件之前的鉤子,參數為上傳的文件,若返回 false 或者返回 Promise 且被 reject,則停止上傳。

  2、split進行字符串截取

【分析】

<template>
  <div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="el-icon-edit"></span><span class="title">上傳數據</span></strong></div>
    <div 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 = 'false'
              :on-success = 'handleSuccess'
              :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>
            <div slot="tip" class="el-upload__tip">只能上傳xls/xlsx文件</div>
          </el-upload>

        </el-form-item>
      </el-form>
    </div>
  </div>
</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>

如有疑問請留言或者到本站社區交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

動態統計當前輸入內容的字節、字符數的實例詳解
動態統計當前輸入內容的字節、字符數的實例詳解看到網上有好多利用charAt方法,原理也很簡單,用正則判斷是不是中文,如果是的話,字節數就加2,

JavaScript數據結構之雙向鏈表定義與使用方法示例
本文實例講述了JavaScript數據結構之雙向鏈表定義與使用方法。分享給大家供大家參考,具體如下:雙向鏈表和普通鏈表的區別在于,在鏈表中,一個節

基于JavaScript實現報警器提示音效果
原型圖:項目需求:服務器接受到報警后將消息推送到前臺,(通過前端實時消息提示的效果-websocket長輪詢),前臺接受到消息后需要發出警報提示音

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
时时彩免费分析软件