update: 图片控件调整下载方式

src/components/app-image-preview/app-image-preview.vue

@@ -33,7 +33,7 @@
 import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
 import { Environment } from '@/environments/environment';
 import { Subject, Unsubscribable } from 'rxjs';
-import { safeRedirect } from '@/utils';
+import { getImgUrl, safeRedirect } from '@/utils';
 
 @Component({})
 export default class AppImagePreview extends Vue {
@@ -64,6 +64,30 @@ export default class AppImagePreview extends Vue {
      */
     @Prop() public value?: any;
 
+    /**
+     * 默认为当前实体名称，有指定则按表单参数
+     *
+     * @type {string}
+     * @memberof AppImageUpload
+     */
+    @Prop() public folder!: string;
+
+    /**
+     * 视图上下文
+     *
+     * @type {*}
+     * @memberof AppAutocomplete
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 默认为当前实体主键id，有指定则按表单参数
+     *
+     * @type {string}
+     * @memberof AppImageUpload
+     */
+    @Prop() public ownerid!: string;
+
     /**
      * 数据值变化
      *
@@ -112,17 +136,23 @@ export default class AppImagePreview extends Vue {
      * @private
      * @memberof AppImagePreview
      */
-    private setFiles(value:any): void {
+    private async setFiles(value:any): Promise<void> {
         let _files = JSON.parse(value);
         if (value && Object.prototype.toString.call(_files)=='[object Array]') {
             this.files = _files;
-            this.files.forEach((file: any) => {
-            let url = `${this.downloadUrl}/${file.id}`;
-            file.url = url;
-        });
+            for (let index = 0; index < this.files.length; index++) {
+                const file: any = this.files[index];
+                let url = `${this.downloadUrl}/${file.id}/${file.name}`;
+                const base64 = `${file.id}|${this.folder}|${this.ownerid}|${this.context.srfpersonid || this.context.srfuserid}`;
+                url =`${url}?key=${window.btoa(base64)}${Math.floor(
+                    1000 + Math.random() * 9000,
+                )}`
+                file.url = await getImgUrl(url, file.name) || url;
+            }
         } else {
             this.files = [];
         }
+        this.$forceUpdate();
     }
 
     /**

src/components/app-image-upload/app-image-upload.vue

@@ -36,7 +36,7 @@
       :class = "{'el-upload-disabled':disabled}"
       :disabled = "disabled"
       :action = "uploadUrl"
-      :headers = "{ 'srfappdata': appData }"
+      :headers="myHeaders"
       :show-file-list = "false"
       :multiple="multiple"
       :accept="accept"
@@ -65,7 +65,8 @@
 import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
 import { Environment } from '@/environments/environment';
 import { Subject, Unsubscribable } from 'rxjs';
-import { safeRedirect } from '@/utils';
+import { getImgUrl, safeRedirect } from '@/utils';
+import EntityService from '@/service/entity-service';
 
 @Component({})
 export default class AppImageUpload extends Vue {
@@ -201,6 +202,22 @@ export default class AppImageUpload extends Vue {
      */
     @Prop({default: 'image/*'}) public accept!: string;
 
+    /**
+     * 实体服务
+     *
+     * @type {EntityService}
+     * @memberof AppFileUpload
+     */
+    @Prop() public appEntityService!: EntityService;
+
+    /**
+     * 默认为当前实体主键id，有指定则按表单参数
+     *
+     * @type {string}
+     * @memberof AppImageUpload
+     */
+    @Prop() public ownerid!: string;
+
     /**
      * 上传文件路径
      *
@@ -254,6 +271,22 @@ export default class AppImageUpload extends Vue {
      */
     public appData: any="";
 
+    /**
+     * 当前登陆人的token
+     *
+     * @type {string}
+     * @memberof DiskFileUpload
+     */
+    public token: string = "Bearer " + localStorage.getItem('token');
+
+    /**
+     * 上传文件请求头
+     *
+     * @type {*}
+     * @memberof DiskFileUpload
+     */
+    public myHeaders: any = {Authorization: this.token, srfappdata: this.appData };
+
     /**
      * 设置files
      *
@@ -269,6 +302,31 @@ export default class AppImageUpload extends Vue {
         }
     }
 
+    private async handleImgUrl() {
+        for (let index = 0; index < this.files.length; index++) {
+            const file: any = this.files[index];
+            let url = `${this.downloadUrl}/${file.id}/${file.name}`;
+            const entityName = this.appEntityService.APPDENAME;
+            const base64 = `${file.id}|${entityName}|${this.ownerid}|${this.context.srfpersonid || this.context.srfuserid}`;
+            url =`${url}?key=${window.btoa(base64)}${Math.floor(
+                1000 + Math.random() * 9000,
+            )}`
+            if (this.export_params.length > 0) {
+                if (!url.includes('?')) {
+                    url +='?';
+                }
+                this.export_params.forEach((item:any,i:any)=>{
+                    url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
+                    if(i<this.export_params.length-1){
+                        url += '&';
+                    }
+                })
+            }
+            file.url = await getImgUrl(url, file.name) || url;
+        }
+        this.$forceUpdate();
+    }
+
     /**
      * 数据处理
      *
@@ -276,10 +334,8 @@ export default class AppImageUpload extends Vue {
      * @memberof AppImageUpload
      */
     private dataProcess(): void {
-
-        let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
+        let _url = `${Environment.BaseUrl}${Environment.UploadFile}?ownertype=${this.name}&ownerid=${JSON.parse(this.data).srfkey}`;
         if (this.upload_params.length > 0 ) {
-            _url +='?';
             this.upload_params.forEach((item:any,i:any)=>{
                 _url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
                 if(i<this.upload_params.length-1){
@@ -291,19 +347,7 @@ export default class AppImageUpload extends Vue {
         
         this.uploadUrl = _url;
 
-        this.files.forEach((file: any) => {
-            let url = `${this.downloadUrl}/${file.id}`;
-            if (this.export_params.length > 0) {
-                url +='?';
-                this.export_params.forEach((item:any,i:any)=>{
-                    url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
-                    if(i<this.export_params.length-1){
-                        url += '&';
-                    }
-                })
-            }
-            file.url = url;
-        });
+        this.handleImgUrl();
     }
 
     /**

src/utils/img-util/img-util.ts

+import axios from 'axios';
+import qs from 'qs';
+
+/**
+ * @description 计算文件类型
+ * @export
+ * @param {string} filetype
+ * @returns {*}  {string}
+ */
+export function calcFilemime(filetype: string): string {
+    let mime = 'image/png';
+    switch (filetype) {
+        case '.wps':
+            mime = 'application/kswps';
+            break;
+        case '.doc':
+            mime = 'application/msword';
+            break;
+        case '.docx':
+            mime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+            break;
+        case '.txt':
+            mime = 'text/plain';
+            break;
+        case '.zip':
+            mime = 'application/zip';
+            break;
+        case '.png':
+            mime = 'imgage/png';
+            break;
+        case '.gif':
+            mime = 'image/gif';
+            break;
+        case '.jpeg':
+            mime = 'image/jpeg';
+            break;
+        case '.jpg':
+            mime = 'image/jpeg';
+            break;
+        case '.rtf':
+            mime = 'application/rtf';
+            break;
+        case '.avi':
+            mime = 'video/x-msvideo';
+            break;
+        case '.gz':
+            mime = 'application/x-gzip';
+            break;
+        case '.tar':
+            mime = 'application/x-tar';
+            break;
+    }
+    return mime;
+}
+
+/**
+ * @description 获取文件名称
+ * @export
+ * @param {*} response
+ * @returns {*}  {string}
+ */
+export function getFileName(response: any): string {
+    let fileName = '';
+    const contentDisposition = response.headers['content-disposition'];
+    if (!contentDisposition) {
+        return fileName;
+    }
+    const disposition = qs.parse(contentDisposition, {
+        delimiter: ';',
+    });
+    if (disposition && disposition.filename) {
+        fileName = disposition.filename as string;
+    }
+    // 特殊处理返回的文件名带有双引号
+    if (fileName.startsWith('"') && fileName.endsWith('"')) {
+        fileName = fileName.substring(1, fileName.length - 1);
+    }
+    return decodeURIComponent(escape(fileName));
+}
+
+export function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string); // 自带 data:application/pdf;base64,...
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * @description 获取图片路径，由于图片鉴权调整，导致所有图片默认显示会出现无权限报错，需转化为base64显示
+ * @export
+ * @param {string} downloadUrl
+ * @returns {*}  {Promise<string>}
+ */
+export function getImgUrl(downloadUrl: string, fileName: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const url = downloadUrl.replace(/\/api/, '');
+        axios.get(url, {responseType: 'blob'}).then((response: any) => {
+            if (!response || response.status != 200) {
+                console.error(`图片下载失败！`);
+                reject();
+            }
+            // 请求成功，后台返回的是一个文件流
+            if (response.data) {
+                // 获取文件名
+                const filename = getFileName(response) || fileName;
+                const ext = '.' + filename.split('.').pop();
+                let filetype = calcFilemime(ext);
+                // 用blob对象获取文件流
+                let blob = new Blob([response.data], { type: filetype });
+                // 通过文件流创建下载链接
+                const base64 = blobToBase64(blob);
+                resolve(base64);
+            } else {
+                console.error(`图片下载失败！`);
+                reject();
+            }
+        })
+        .catch((error: any) => {
+            console.error(error);
+            reject();
+        });
+    });
+}

src/utils/index.ts

@@ -13,3 +13,4 @@ export { LoadAppData } from './load-app-data/load-app-data';
 export { Interceptors } from './interceptor/interceptor';
 export { StudioActionUtil } from './studio-action/StudioActionUtil';
 export { safeRedirect } from './redirect-util/redirect-util';
+export { getImgUrl } from './img-util/img-util';