基于vue+element ui 实现excel文件的导入

效果图：

我这个需求，是要把时间和文件传给后端，并且有一个继续添加，有两种方法可以实现。

 

 最后跟后端商量一下，最终以第二种方法实现。这里我就只写如何实现将文件导入。 

 1.HTML

<tr>
              <td width="30%">指定用户:</td>
              <td>
<!--                action：必选参数，上传的地址；-->
<!--                auto-upload：是否在选取文件后立即进行上传，通过true、false控制；-->
<!--                multiple：是否支持多选文件，通过true、false控制；-->
<!--                show-file-list：是否显示已上传文件列表，通过true、false控制；-->
<!--                file-list：上传的文件列表；-->
<!--                on-success：文件上传成功时的钩子。-->
<!--                on-progress:文件上传时的钩子-->
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                   accept=".xls, .xlsx"
                  :show-file-list="true"
                  :multiple="false"
                  :on-success="uploadByJsqd"
                  :on-progress="getId(item.id)"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">导入指定用户的手机号，限制.xlsx .xls格式的文件</div>
                </el-upload>
              </td>
</tr>

 2.JS

//上传文件
    beforeAvatarUpload(file) {
      console.log(file)
      // 通过split方法和fileArr方法获取到文件的后缀名
      let fileArr = file.name.split('.')
      let suffix = fileArr[fileArr.length - 1]
      //只能导入.xls和.xlsx文件
      if (!/(xls|xlsx)/i.test(suffix)) {
        this.$message('文件格式不正确')
        return false
      }
      return true
    },
 //文件上传成功就会触发的事件
    async uploadByJsqd(res,file) {
      console.log(file)
      //判断是否符合beforeAvatarUpload方法中的条件
      if (this.beforeAvatarUpload(file)) {
        var formdata = new FormData()
        formdata.append('file', file.raw)
        await this.$api.starCollectionMgmt.queryPhoneByExcel(formdata).then(res => {
          if (res.code == 200) {
            for(let index in this.lists){
             if(this.lists[index].id==this.chooseId){
              this.lists[index].phones=res.data
             }
            }
          } else {
            let that = this
            this.$message({
              message: res.message,
              duration: this.common.duration,
              type: 'error',
            });
          }
        })
      }
    },

 打印结果

 以上代码就能实现文件导入的功能。