diff --git a/package.json b/package.json
index 9942fbac..f1f60723 100644
--- a/package.json
+++ b/package.json
@@ -43,9 +43,12 @@
     "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
   },
   "dependencies": {
+    "@xkeshi/image-compressor": "^0.5.3",
     "axios": "0.18.1",
+    "bootstrap": "4.3.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
+    "cropper": "4.0.0",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
     "echarts": "4.2.1",
@@ -58,6 +61,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "popper.js": "1.15.0",
     "screenfull": "4.2.0",
     "showdown": "1.9.0",
     "sortablejs": "1.8.4",
@@ -66,6 +70,7 @@
     "vue-count-to": "1.0.13",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
+    "vue-upload-component": "2.8.20",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
diff --git a/src/api/user.js b/src/api/user.js
index de69f707..6cff7f62 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -22,3 +22,11 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function sendAnalyzeRequest() {
+  return request({
+    url: '/uploader/analyze',
+    method: 'get',
+    baseURL: 'http://www.google.com'
+  })
+}
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 9e8ba8b6..48e19922 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -2,7 +2,7 @@
   <div>
     <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
     <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
-      Drop excel file here or
+      Drop file here or
       <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
         Browse
       </el-button>
@@ -113,6 +113,7 @@ export default {
     },
     isExcel(file) {
       return /\.(xlsx|xls|csv)$/.test(file.name)
+      // return true
     }
   }
 }
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d9075a24..2f04decf 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -84,11 +84,12 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 62px;
   overflow: hidden;
   position: relative;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  padding: 0;
 
   .hamburger-container {
     line-height: 46px;
diff --git a/src/main.js b/src/main.js
index ef07f389..9a2f0849 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,8 @@ import './permission' // permission control
 import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
 
 /**
  * If you don't want to use mock-server
@@ -39,6 +41,18 @@ Vue.use(Element, {
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
+  Vue.filter('formatSize', function(size) {
+    if (size > 1024 * 1024 * 1024 * 1024) {
+      return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
+    } else if (size > 1024 * 1024 * 1024) {
+      return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
+    } else if (size > 1024 * 1024) {
+      return (size / 1024 / 1024).toFixed(2) + ' MB'
+    } else if (size > 1024) {
+      return (size / 1024).toFixed(2) + ' KB'
+    }
+    return size.toString() + ' B'
+  })
 })
 
 Vue.config.productionTip = false
diff --git a/src/router/index.js b/src/router/index.js
index fbe8ad25..e79788b2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -83,6 +83,18 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/uploader',
+    component: Layout,
+    children: [
+      {
+        path: 'vueUploader',
+        component: () => import('@/views/VueUploader/index'),
+        name: 'VueUploader',
+        meta: { title: 'VueUploader', icon: 'documentation', affix: true }
+      }
+    ]
+  },
   {
     path: '/documentation',
     component: Layout,