diff --git a/src/api/backup.js b/src/api/backup.js
new file mode 100644
index 00000000..bd3e9c90
--- /dev/null
+++ b/src/api/backup.js
@@ -0,0 +1,18 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/backups'
+
+const backupApi = {}
+
+backupApi.importMarkdown = (formData, uploadProgress, cancelToken) => {
+  return service({
+    url: `${baseUrl}/import/markdowns`,
+    timeout: 8640000, // 24 hours
+    data: formData, // form data
+    onUploadProgress: uploadProgress,
+    cancelToken: cancelToken,
+    method: 'post'
+  })
+}
+
+export default backupApi
diff --git a/src/config/router.config.js b/src/config/router.config.js
index a0df824c..0a28bb42 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -178,12 +178,12 @@ export const asyncRouterMap = [
           //   component: () => import('@/views/system/BackupList'),
           //   meta: { title: '博客备份', hiddenHeaderContent: false }
           // },
-          // {
-          //   path: '/system/tools',
-          //   name: 'ToolList',
-          //   component: () => import('@/views/system/ToolList'),
-          //   meta: { title: '小工具', hiddenHeaderContent: false }
-          // },
+          {
+            path: '/system/tools',
+            name: 'ToolList',
+            component: () => import('@/views/system/ToolList'),
+            meta: { title: '小工具', hiddenHeaderContent: false }
+          },
           {
             path: '/system/about',
             name: 'About',
diff --git a/src/views/system/ToolList.vue b/src/views/system/ToolList.vue
index 5e5e98c3..09cac66d 100644
--- a/src/views/system/ToolList.vue
+++ b/src/views/system/ToolList.vue
@@ -14,11 +14,11 @@
             :bordered="false"
             :bodyStyle="{ padding: '16px' }"
           >
-            <p>支持 Hexo/Jekyll 导入并解析元数据</p>
+            <p>支持 Hexo/Jekyll 文章导入并解析元数据</p>
             <a-button
               type="primary"
               style="float:right"
-              @click="importMarkDown"
+              @click="handleImportMarkdown"
             >导入</a-button>
           </a-card>
         </a-col>
@@ -28,31 +28,35 @@
         v-model="markdownUpload"
         :footer="null"
       >
-        <a-upload-dragger
-          name="file"
-          :multiple="true"
-          action="//jsonplaceholder.typicode.com/posts/"
+        <upload
+          name="files"
+          multiple
+          accept="application/markdown"
+          :uploadHandler="uploadHandler"
           @change="handleChange"
         >
           <p class="ant-upload-drag-icon">
             <a-icon type="inbox" />
           </p>
-          <p class="ant-upload-text">拖拽或点击选择 MarkDown 文件到此处</p>
-        </a-upload-dragger>
+          <p class="ant-upload-text">拖拽或点击选择 Markdown 文件到此处</p>
+          <p class="ant-upload-hint">支持多个文件同时上传</p>
+        </upload>
       </a-modal>
     </div>
   </div>
 </template>
 
 <script>
+import backupApi from '@/api/backup'
 export default {
   data() {
     return {
-      markdownUpload: false
+      markdownUpload: false,
+      uploadHandler: backupApi.importMarkdown
     }
   },
   methods: {
-    importMarkDown() {
+    handleImportMarkdown() {
       this.markdownUpload = true
     },
     handleChange(info) {
@@ -61,9 +65,9 @@ export default {
         console.log(info.file, info.fileList)
       }
       if (status === 'done') {
-        this.$message.success(`${info.file.name} file uploaded successfully.`)
+        this.$message.success(`${info.file.name} 导入成功`)
       } else if (status === 'error') {
-        this.$message.error(`${info.file.name} file upload failed.`)
+        this.$message.error(`${info.file.name} 导入失败`)
       }
     }
   }