根据文件id下载文件方法，，首页头像大小调整

package.json

@@ -32,6 +32,7 @@
     "fuse.js": "6.4.6",
     "highlight.js": "^11.5.1",
     "js-cookie": "3.0.1",
+    "js-file-download": "^0.4.12",
     "js-md5": "^0.7.3",
     "jsencrypt": "3.2.1",
     "jsrsasign": "^10.8.6",

src/api/tool/file.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request, { downFileById } from '@/utils/request'
 
 /**
  * 文件存储分页查询
@@ -8,7 +8,7 @@ export function listSysfile(query) {
   return request({
     url: 'tool/file/list',
     method: 'get',
-    params: query,
+    params: query
   })
 }
 
@@ -20,7 +20,7 @@ export function addSysfile(data) {
   return request({
     url: 'tool/file',
     method: 'post',
-    data: data,
+    data: data
   })
 }
 
@@ -32,7 +32,7 @@ export function updateSysfile(data) {
   return request({
     url: 'tool/file',
     method: 'PUT',
-    data: data,
+    data: data
   })
 }
 
@@ -67,3 +67,6 @@ export function exportSysfile(query) {
   })
 }
 
+export const download = (fileId) => {
+  return downFileById('tool/file/download', fileId)
+}

src/utils/request.js

@@ -212,4 +212,48 @@ export async function downFile(url, params, config) {
     })
 }
 
+export const downFileById = (url, id) => {
+  return new Promise((resolve, reject) => {
+    downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' })
+    service
+      .get(`${url}/${id}`, {
+        headers: { 'Content-Type': 'application/json; application/octet-stream' },
+        responseType: 'blob',
+        onDownloadProgress: (progressEvent) => {
+          // console.log('下载进度：', progressEvent)
+          let step = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+          // console.log(step + '%')
+        }
+      })
+      .then(async (resp) => {
+        const { data } = resp
+
+        const isLogin = await blobValidate(data)
+        if (isLogin) {
+          resolve(resp)
+        } else {
+          const resText = await data.text()
+          const rspObj = JSON.parse(resText)
+          const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+
+          ElMessage({
+            message: errMsg,
+            type: 'error'
+          })
+          reject()
+        }
+        downloadLoadingInstance.close()
+      })
+      // @ts-ignore
+      .catch((err) => {
+        reject()
+        ElMessage({
+          message: '下载文件出现错误，请联系管理员！',
+          type: 'error'
+        })
+        downloadLoadingInstance.close()
+      })
+  })
+}
+
 export default service

src/views/index.vue

@@ -108,10 +108,10 @@
                     </el-row>
                   </template>
                   <template #extra>
-                    <el-image :src="userInfo.avatar">
+                    <el-image :src="userInfo.avatar" style="width: 60px; height: 60px">
                       <template #error>
                         <div class="image-slot">
-                          <el-icon :size="40"><Avatar /></el-icon>
+                          <el-icon :size="60"><Avatar /></el-icon>
                         </div>
                       </template>
                     </el-image>

yarn.lock

@@ -2608,6 +2608,11 @@ js-cookie@3.0.1:
   resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
   integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
 
+js-file-download@^0.4.12:
+  version "0.4.12"
+  resolved "https://registry.npmmirror.com/js-file-download/-/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
+  integrity sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==
+
 js-md5@^0.7.3:
   version "0.7.3"
   resolved "https://registry.npmmirror.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
@@ -3696,16 +3701,7 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3758,7 +3754,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -3772,13 +3768,6 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"