[JavaScript知识库]上传 xls、xlsx

<template>
  <div> 
    <div>
      <div class="upfiles">
        <div class="upbox">
          <div class="upTitle">
            <p>
              上传填好的找好信息表，文件后缀必须为xls或xlsx,文件大小不的大于10M
            </p>
          </div>
          <div class="Files">
        <el-upload 
            :on-change="fileAdd" 
            class="upload-demo"
            action="#"
            :show-file-list='showfilelist'
            :file-list="fileList" :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
             <i class="el-icon-upload" style="font-size:30px"></i>
             <div class="el-upload__text">点击上传文件</div> 
	    </el-upload>

      
          </div>
        </div>
      </div>
      <div class="exportBtm">
          <p class="dowLink" @click="TemplateDwd">下载模板</p>
               <Button
          type="primary"
          size="small"
          name="开始导入" 
          @addUserExcel="addUserExcel"
          submitClk="addUserExcel"
          class="btm"
        />  
      </div>
    </div>
  </div>
</template>

<script>
import Button from "@/components/ButtomSmall/button.vue";

import base from '@/utils/baseUrl.js' 
import {post} from '@/api/table.js'
  let { downloadUrl}  =base
export default {
  data() {
    return { 
        showfilelist:true,
        fileList:[]
    };
  },

  components: {Button},

  computed: {},

  mounted() {},

  methods: {
    //  模板下载
    TemplateDwd() { 
      let a = document.createElement("a");
      a.href = downloadUrl + "static/excel/用户导入模板.xlsx";
      a.click();  
    },
// 先上传本地
    fileAdd(file, fileList) {
            this.fileList = [] //只支出一个文件
            const isXlS = file.raw.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||  file.raw.type === "application/vnd.ms-excel";
            if(!isXlS) {
                this.showfilelist = false
                this.$message.error("仅支持xls、xlsx格式的文件!");
                return false
            }; 
            const isLt10M = file.size / 1024 / 1024 < 10;
         
            if (!isLt10M) {
                this.showfilelist = false
                this.$message.error("上传文件小不能超过 10MB!");
                return false
           }
            
			      this.fileList.push(file); 
            this.showfilelist = true 
			},
// 开始上传服务器
    async addUserExcel(){   
        let file = new FormData();
         file.append('file', this.fileList[0].raw);
         let {code} =await post('sys-user/imports', file) 
         if(code == 0){
                this.$message.success("文件导入成功");
            }else{
                this.$message.error("文件导入失败");
            }
         this.fileList = [];
         this.showfilelist = false;
         this.$emit('exportUserClose',false)


    }
  },
};
</script>
<style scoped lang="scss">
.upfiles {
  width: 100%;
  margin-top: 20px;
  background: #fbfbfb;
  border: 1px dashed #aaa;
  padding: 10px;
  .upTitle p {
    line-height: 27px;
  }
}
 .upload-demo{
  display: flex;
  flex-direction: column;
  align-items: center; 
  margin-top: 60px;
 }
 .upload-demo .el-upload-list__item-name{
  width: 100%;
  text-align: center;
 }
.Files {
  border: 1px solid #fbfbfb; 
  background: #fff;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center; 
  img {
    width: 49px;
    height: 40px;
    cursor: pointer;
  }
}
.Files ::v-deep .btm {
  margin-top: 10px;
  padding: 6px 0;
}
.exportBtm{
    margin-top: 30px;
    text-align: right;
    display: flex;
    justify-content: end;
    align-items: center; 
}
.exportBtm ::v-deep .btm .el-button {
  padding: 6px 0; 
}
.dowLink{
    margin-right: 20px;
    color: $activeColor; 
    text-decoration: underline;
    cursor: pointer;
}

</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖