element-ui上传问题

个人感觉任何一个ui框架都是大同小异的，基本都差不多的。下面直接上代码，封装了一个element-ui 上传exel文档的的一个组件，可以直接拿过去使用，可以很高效的完成页面上的上传功能。

代码如下：

第一步：是这个封装upload的组件

<template>

  <div>

    <el-dialog :title="form.title" :visible.sync="addDialogVisible" width="700px" :model="form" @close='cancle'>

      <el-form  ref="ruleForm" :model="form" @submit.native.prevent>

          <el-row class="rowHand">             

            <!-- 备注：<font style="color:red;">*</font>为必选项. -->

           <span class="imp">导入类型：</span>

            <el-radio-group v-model="radio" @change="changeRadio">

                <el-radio :label="1">漏洞结果导入</el-radio>

                <el-radio :label="2">web漏洞结果导入</el-radio>

            </el-radio-group>

          </el-row>

          <el-row :gutter="5">

              <el-col :span="24">

                  <el-form-item prop="file"  label="本地文件：" label-width="90px">

                  <el-upload

                    class="upload-demo"

                    ref="upload"

                    name="file"

                    :show-file-list="true"

                    :file-list="fileList"

                    :action="importAssetFile"

                    :on-success="handleSuccess"

                    :on-error="handleError"

                    :on-change="handleChange"

                    :before-upload="beforeAvatarUpload"

                    :auto-upload="false">

                    <el-button slot="trigger" size="small" type="primary" align="left">选择文件</el-button>

                  </el-upload>

                  <!-- <div class="tip">每次导入文件后当前数据将被完全替换，导入数据仅支持EXCLE格式。（数据表头为src_ip, ,src_port,dst_ip,dst_port,agreement）</div> -->

                  </el-form-item>

              </el-col>

          </el-row>

       </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="appendExel()" :loading="savebutton">确 定</el-button>

        <el-button  @click="cancle()">取消</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

import httpUrl from "@/api/httpUrl3.js";

export default {

  props:["addDialogVisible","form","savebutton","rules","importAssetFile",'radio'],

  data() {

    return {

      importAssetFile:"",

      // radio:'',

      fileList:[],

    };

  },

  methods: {

    changeRadio(val){

       console.log(this.radio)

       console.log(val)

       if(val == 1){  //漏洞导入

           this.importAssetFile = httpUrl.vulnerabilityy_search.vulnerabilityImport;

       }else{

           this.importAssetFile = httpUrl.vulnerabilityy_search.vulnerabilityWebImport;

       }

    },

    //文件上传成功

    handleSuccess(response, file, fileList) {

      if(response.code === -1){

        this.$message({

          // message: response.msg,

          message: '上传失败',

          type: "error"

        });

        this.savebutton = false;

        this.$emit("appendExel", false);

      }else{

        this.$refs.upload.clearFiles();

        this.$message({

          message: "上传成功！",

          type: "success"

        });

        this.savebutton = false;

        this.$emit("appendExel", false);

      }

    },

    handleChange(file, fileList) {

      let isXls =

        file.type === "application/vnd.ms-excel"? true:file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"? true: false;

        if (!isXls) {

          let Xls = file.name.split('.')

          if (Xls[1] === 'xls'||Xls[1] === 'xlsx') {

            isXls = true

          } else {

            this.$message.error("上传的文件只能是xls以及xlsx格式！");

            this.$refs.upload.clearFiles();

            this.fileList = [];

            return

          }

        }

      let item = fileList.pop();

      if(item){

        this.fileList = [item];

      }

      this.savebutton = false;

    },

    cancle(){

      this.$refs.upload.clearFiles();

      this.$emit("dialogFormVisibleFlagUp", false);

      this.form={};

    },

    appendExel(){

      let $self = this;

      $self.savebutton = true;

      console.log('$self.fileList');

      console.log($self.fileList);

      if(!this.radio){

         $self.$message({

            message: "请选择导入的类型",

            type: "error"

        });

        return false

      }

      if(this.fileList && this.fileList.length == 0){

         $self.$message({

            message: "请选择文件",

            type: "error"

        });

        return false

      }

      if($self.fileList.length != 0){

            $self.$refs.upload.submit();

      }else{

            $self.$emit("appendExel", false);

      }

      // $self.$refs["ruleForm"].validate(valid => {

      //   if (valid) {

         

      //   }

      // });

    },

    clearClick(){

      let $self = this;

      $self.fileList = [];

    },

  },

  created() {

  },

}

</script>

<style lang="scss" scoped>

.imp{

   font-size: 14px;

   color: #606266;

}

</style>

第二步：在组件中调用

<el-col :span="19" align="right">

           <el-button

            type="success"

            icon="el-icon-upload2"

            size="small"

           @click="showAddDialog({},'add')"

          >导入</el-button>

 <!-- 导入 -->

      <upload-Compontents

      ref="clearList"

      :addDialogVisible="addDialogVisible"

      :rules="addRules" 

      :form="addForm"

      :savebutton="savebutton"

      :importAssetFile="importAssetFile"

      @appendExel="appendExel" 

      @dialogFormVisibleFlagUp="dialogFormVisibleFlagUp"

      @radio="radio"

    ></upload-Compontents>

 addForm: {

        title:"",

      },

      addDialogVisible:false, //导入

methods中的方法：

 

dialogFormVisibleFlagUp(val){

        this.addDialogVisible = val;

    },

    // 导入

    appendExel(val) {

      this.addDialogVisible = val;

      this.getTableData();

    },

    showAddDialog(){

      let $self = this;

      $self.$refs["clearList"].clearClick();

      $self.addDialogVisible = true;

      $self.addForm.title = "导入";   

  $self.importAssetFile = "";  //后端的地址，可以在父组件中直接书写。对应子组件中的action

      $self.radio = ""; 

    }，

   就这样就完美封装了一个element-ui  的上传组件