update 恢复文件预览权限验证,新增图片组件,从接口读取文件流

.gitignore

@@ -5,3 +5,4 @@ obj/
 /packages
 .vs
 Logs/
+/Api/Ewide.Web.Entry/wwwroot/Upload

Api/Ewide.Core/Service/File/SysFileService.cs

@@ -106,7 +106,6 @@ namespace Ewide.Core.Service
         /// <param name="input"></param>
         /// <returns></returns>
         [HttpGet("/sysFileInfo/preview")]
-        [AllowAnonymous]
         public async Task<IActionResult> PreviewFileInfo([FromQuery] QueryFileInoInput input)
         {
             return await DownloadFileInfo(input);

Web/src/components/yoImage/index.js

@@ -0,0 +1,35 @@
+import { ArrayBufferToBase64 } from '@/util/file'
+
+export default {
+    props: {
+        type: {
+            type: String,
+            default: 'image'
+        },
+        id: {
+            type: [String, Number],
+            require: true
+        }
+    },
+    data() {
+        return {
+            src: ''
+        }
+    },
+
+    created() {
+        if (this.id) {
+            this.$api.sysFileInfoPreview({ id: this.id }).then(async ({ data }) => {
+                const base64 = await ArrayBufferToBase64(data)
+                this.src = base64
+            })
+        }
+    },
+
+    render() {
+        return this.type == 'avatar' ?
+            <a-avatar src={this.src} {...{ props: this.$attrs }} />
+            :
+            <img src={this.src} {...{ props: this.$attrs }} />
+    },
+}

Web/src/main.js

@@ -53,6 +53,8 @@ import YoTable from './components/yoTable'
 Vue.component('YoTable', YoTable)
 import YoTableActions from './components/yoTableActions'
 Vue.component('YoTableActions', YoTableActions)
+import YoImage from './components/yoImage'
+Vue.component('YoImage', YoImage)
 
 /**
  * 引入主题样式

Web/src/pages/system/user/index.vue

@@ -80,12 +80,13 @@
             <a-list-item-meta>
               <div slot="title">{{ record.nickName || record.name }}</div>
               <div slot="description">{{ record.account }}</div>
-              <a-avatar
+              <yo-image
+                :id="record.avatar"
                 :size="48"
-                :src="`${previewUrl}?id=${record.avatar}`"
                 icon="user"
                 shape="square"
                 slot="avatar"
+                type="avatar"
               />
             </a-list-item-meta>
             <div class="yo-list-content--h">
@@ -120,8 +121,6 @@
   </yo-tree-layout>
 </template>
 <script>
-import { PERVIEW_URL } from '@/util/global';
-
 import YoTreeLayout from '@/components/yoTreeLayout';
 import YoList from '@/components/yoList';
 
@@ -153,8 +152,6 @@ export default {
           values: [],
         },
       ],
-
-      previewUrl: PERVIEW_URL,
     };
   },
 

Web/src/util/file/index.js

@@ -0,0 +1,85 @@
+const _getFileTypeByBase64 = (base64) => {
+    let arr = base64.split(','),
+        fileType = arr[0].match(/:(.*?);/)[1]
+    return fileType
+}
+
+/**
+ * ArrayBuffer转Base64
+ * @param {*} arrayBuffer 
+ * @returns 
+ */
+export const ArrayBufferToBase64 = async (arrayBuffer) => {
+    const blob = ArrayBufferToBlob(arrayBuffer)
+    const base64 = await BlobToBase64(blob)
+    return base64
+}
+
+/**
+ * ArrayBuffer转Blob
+ * @param {*} arrayBuffer 
+ * @returns 
+ */
+export const ArrayBufferToBlob = (arrayBuffer) => {
+    return new Blob([arrayBuffer])
+}
+
+/**
+ * Base64转Blob
+ * @param {*} base64 
+ * @returns 
+ */
+export const Base64ToBlob = (base64) => {
+    let arr = base64.split(','),
+        fileType = _getFileTypeByBase64(base64),
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n)
+
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new Blob([u8arr], { type: fileType })
+}
+
+/**
+ * Blob转文件
+ * @param {*} blob 
+ * @param {*} fileName 
+ * @param {*} fileType 
+ * @returns 
+ */
+export const BlobToFile = (blob, fileName, fileType) => {
+    blob.lastModifiedDate = new Date()
+    blob.name = fileName
+    const file = new File([blob], fileName, { type: fileType })
+    return file
+}
+
+/**
+ * Base64转文件
+ * @param {*} base64 
+ * @param {*} fileName 
+ * @returns 
+ */
+export const Base64ToFile = (base64, fileName) => {
+    const blob = Base64ToBlob(base64)
+    const fileType = _getFileTypeByBase64(base64)
+    const file = BlobToFile(blob, fileName, fileType)
+    return file
+}
+
+/**
+ * Blob转Base64
+ * @param {*} blob 
+ * @returns 
+ */
+export const BlobToBase64 = async (blob) => {
+    return new Promise(resolve => {
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+            resolve(e.target.result)
+        }
+    })
+}

Web/src/views/main/_layout/header/user.js

@@ -52,11 +52,9 @@ export default {
             <div onMouseenter={this.onOpen} onMouseleave={this.onClose} class="user-container" >
                 <div class="user-container-inner">
                     <div class="user--base">
-                        <a-avatar
-                            src={this.$root.global.info && (`${PERVIEW_URL}?id=${this.$root.global.info.avatar}`)}
-                            class="user--avatar"
-                            icon="user"
-                        />
+                        {
+                            this.$root.global.info && <yo-image width="32" type="avatar" class="user--avatar" icon="user" id={this.$root.global.info.avatar} />
+                        }
                         {
                             this.$root.global.info &&
                             <span