上传人员信息

src/views/modules/base/resi.vue

@@ -8,14 +8,24 @@
     />
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
-        <el-button type="success" size="small" @click="handleAdd"
+        <el-button type="success" size="small" @click="handleAdd">新增</el-button>
-          >新增</el-button
+        <el-button type="warning" size="small" @click="handleExport">导出</el-button>
-        >
-        <el-button type="warning" size="small" @click="handleExport"
-          >导出</el-button
-        >
         <!-- <el-button type="primary" size="small">下载人口模板</el-button> -->
-        <!-- <el-button type="danger" size="small">导入人口数据</el-button> -->
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          action="uploadUlr"
+          :limit="1"
+          :with-credentials="true"
+          :show-file-list="false"
+          :auto-upload="true"
+          :on-success="handleExcelSuccess"
+          :before-upload="beforeExcelUpload"
+          :http-request="uploadHttpRequest"
+          >
+          <el-button type="danger" size="small">导入人口数据</el-button>
+        </el-upload>
+        
       </div>
       <el-table
         :data="tableData"
@@ -229,6 +239,7 @@ export default {
       pageLoading: false,
       dialogEditVisible: false,
       dialogVisible: false,
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/epmetuser/icresiuser/importExcel',
       currentPage: 1,
       pageSize: 20,
       total: null,
@@ -350,6 +361,49 @@ export default {
           return this.$message.error('网络错误')
         })
     },
+    // 上传大图标成功
+    handleExcelSuccess (res, file) {
+      if (res.code === 0 && res.msg === 'success') {
+
+        console.log('resss---ppp', res)
+
+      } else {
+        this.$message.error(res.msg)
+      }
+    },
+
+    beforeExcelUpload (file) {
+      console.log('file', file)
+      const isType = file.type === 'application/vnd.ms-excel'
+      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      const fileType = isType || isTypeComputer
+      const isLt1M = (file.size / 1024 / 1024) < 10
+      if(!fileType) {
+          this.$message.error('上传文件只能是xls/xlsx格式！')
+      }
+      
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 10MB!')
+      }
+      return fileType && isLt1M
+    },
+    uploadHttpRequest(file) {
+        const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
+        formData.append('file', file.file) //添加文件对象
+        this.$http
+        .post('/epmetuser/icresiuser/importExcel', formData)
+        .then(({ data: res }) => {
+            if(res.code === 0) {
+              // this.$refs.upload.submit()
+              // file.onSuccess() 
+              console.log('res-ooooo---', res)
+            }
+        })
+        .catch( err => {
+            console.log('失败', err)
+            param.onError() //上传失败的文件会从文件列表中删除
+        })
+    },
     handleClick(tab, event) {
       console.log(tab, event)
     },
@@ -796,7 +850,11 @@ export default {
   margin-top: 20px;
 }
 .resi-row-btn {
+  display: flex;
   margin-bottom: 13px;
+  .el-button {
+    margin-left: 10px;
+  }
 }
 .resi-other {
   width: 100%;