@ebl-vue/editor-full 2.31.34 → 2.31.36

package/src/plugins/imageTool/uploader.ts

@@ -0,0 +1,287 @@
+
+
+import type {  UploadOptions } from './types/types';
+import type { UploadResponseFormat, ImageConfig } from './types/types';
+import axios, { AxiosInstance } from "axios";
+import { selectFiles } from './utils/index';
+/**
+ * Params interface for Uploader constructor
+ */
+interface UploaderParams {
+  /**
+   * Configuration for the uploader
+   */
+  config: ImageConfig;
+
+  /**
+   * Handles the upload response.
+   * @param {UploadResponseFormat} response - Response format expected from the backend on file uploading.
+   * @returns {void}
+   */
+  onUpload: (response: UploadResponseFormat) => void;
+
+  /**
+   *
+   * @param error : error type
+   * @returns void
+   */
+  onError: (error: string) => void;
+}
+
+/**
+ * Module for file uploading. Handle 3 scenarios:
+ *  1. Select file from device and upload
+ *  2. Upload by pasting URL
+ *  3. Upload by pasting file from Clipboard or by Drag'n'Drop
+ */
+export default class Uploader {
+  private config: ImageConfig;
+  private onUpload: (response: UploadResponseFormat) => void;
+  private onError: (error: string) => void;
+  /**
+   * @param params - uploader module params
+   * @param params.config - image tool config
+   * @param params.onUpload - one callback for all uploading (file, url, d-n-d, pasting)
+   * @param params.onError - callback for uploading errors
+   */
+  constructor({ config, onUpload, onError }: UploaderParams) {
+    this.config = config;
+    this.onUpload = onUpload;
+    this.onError = onError;
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.transport()
+   * @param onPreview - callback fired when preview is ready
+   */
+  public async uploadSelectedFile({ onPreview, noSelectedFile }: UploadOptions) {
+
+    const preparePreview = function (file: File): void {
+      const reader = new FileReader();
+
+      reader.readAsDataURL(file);
+      reader.onload = (e) => {
+        onPreview((e.target as FileReader).result as string);
+      };
+    };
+    
+    /**
+     * Custom uploading
+     * or default uploading
+     */
+
+    let cdn: string = "";
+    let objectKey: string = "";
+
+
+
+    //选获取上传文件的地址
+    const files = await selectFiles({ accept: this.config.types ?? 'image/*' });
+
+    if (files && files.length > 0) {
+      preparePreview(files[0]);
+    } else {
+      noSelectedFile();
+      return
+    }
+
+    const file = files[0];
+    const fileTypes = this.config.types?this.config!.types.split(","):[];
+    let suffixIndex = file.name.lastIndexOf(".");
+    let suffix = file.name.slice(suffixIndex);
+
+    if (!fileTypes.includes(suffix.toLowerCase())) {
+      this.onError("文件类型不支持");
+      return;
+    }
+
+    let headers: Record<string, string> = {};
+    if (this.config.userStore) {
+      const token = this.config.userStore.token;
+      const tokenName = this.config.userStore.tokenName;
+      const tokenPrefix = this.config.userStore.tokenPrefix;
+      if (token && tokenName) {
+        headers[tokenName] = tokenPrefix + " " + token
+      }
+    }
+    headers["Content-Type"] = "application/json";
+    const axiosInstance: AxiosInstance = axios.create({
+      timeout: 1800000,
+      headers: headers,
+    });
+
+    //console.log("this.config.endpoints", this.config.endpoints);
+    const uploadBodyRes = await axiosInstance.post(this.config.endpoints.byFile!, {
+      "fileName": file.name,
+      "contentType": file.type
+    })
+    if (uploadBodyRes.status !== 200) {
+      this.onError(uploadBodyRes.statusText);
+      return;
+    }
+    const uploadRes = uploadBodyRes.data;
+    if (!uploadRes.success) {
+      this.onError(uploadRes.message!);
+      return;
+    }
+    console.log(uploadRes);
+    cdn = uploadRes.data.cdn;
+    objectKey = uploadRes.data.objectKey;
+
+    //headers["Content-Type"] = file.type;
+    
+    const axiosUpload: AxiosInstance = axios.create({
+      timeout: 1800000,
+      headers: { "Content-Type": file.type }
+    });
+    let upload = axiosUpload.put(uploadRes.data.presignedUrl, file);
+
+
+    upload.then((response) => {
+      let res: any = {
+        
+      }
+      if (response.status === 200) {
+        res = {
+          success: 1,
+          file: { url: cdn + objectKey }
+        }
+      } else {
+        res = {
+          success: 0,
+          message: response.statusText
+        }
+      }
+      this.onUpload(res);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.post()
+   * @param url - image source url
+   */
+  public uploadByUrl(url: string): void {
+    let upload;
+          let headers: Record<string, string> = { "Content-Type": "application/json" };
+    if (this.config.userStore) {
+      const token = this.config.userStore.token;
+      const tokenName = this.config.userStore.tokenName;
+      const tokenPrefix = this.config.userStore.tokenPrefix;
+      if (token && tokenName) {
+        headers[tokenName] = tokenPrefix + " " + token
+      }
+    }
+     const axiosInstance: AxiosInstance = axios.create({
+        timeout: 1800000,
+        headers: headers,
+      });
+    upload = axiosInstance.post(this.config.endpoints.byUrl!, {
+      "url": url,
+       "accept": ".jpg,.jpeg,.gif,.png,.webp"
+    })
+
+
+
+
+    upload.then((response) => {
+      
+      if(response.status !== 200||response.data.success===false){
+        this.onError(response.data.message!);
+        return;
+      }
+      
+      let cdn = response.data.data.cdn;
+      let objectKey = response.data.data.objectKey;
+
+      let res = {
+        success: 1,
+        file: { url: cdn + objectKey }
+      };
+      this.onUpload(res);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.post()
+   * @param file - file pasted by drag-n-drop
+   * @param onPreview - file pasted by drag-n-drop
+   */
+  public async uploadByFile(file: Blob, { onPreview }: UploadOptions) {
+
+
+    const fileTypes = this.config.types?this.config!.types.split(","):[];
+
+    let suffixIndex = (file as File).name.lastIndexOf(".");
+    let suffix = (file as File).name.slice(suffixIndex);
+
+    if (!fileTypes.includes(suffix.toLowerCase())) {
+      this.onError("文件类型不支持");
+      return;
+    }
+
+
+
+    let headers: Record<string, string> = {};
+    if (this.config.userStore) {
+      const token = this.config.userStore.token;
+      const tokenName = this.config.userStore.tokenName;
+      const tokenPrefix = this.config.userStore.tokenPrefix;
+      if (token && tokenName) {
+        headers[tokenName] = tokenPrefix + " " + token
+      }
+    }
+    const axiosInstance: AxiosInstance = axios.create({
+      timeout: 1800000,
+      headers: headers,
+    });
+    headers["Content-Type"] = "application/json";
+
+    const uploadBodyRes = await axiosInstance.post(this.config.endpoints.byFile!, {
+      "fileName": (file as File).name,
+      "contentType": file.type
+    })
+    if (uploadBodyRes.status !== 200) {
+      this.onError(uploadBodyRes.statusText);
+      return;
+    }
+    const uploadRes = uploadBodyRes.data;
+    if (!uploadRes.success) {
+      this.onError(uploadRes.message!);
+      return;
+    }
+    console.log(uploadRes);
+    let cdn = uploadRes.data.cdn;
+    let objectKey = uploadRes.data.objectKey;
+
+
+    headers["Content-Type"] = file.type;
+    let upload = axiosInstance.put(uploadRes.data.presignedUrl, file);
+    upload.then((response) => {
+      let res:any = {
+        
+      }
+      if (response.status === 200) {
+        res = {
+          success: 1,
+          file: { url: cdn + objectKey }
+        }
+      } else {
+        res = {
+          success: 0,
+          message: response.statusText
+        }
+      }
+      this.onUpload(res);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+}

package/src/plugins/imageTool/utils/dom.ts

@@ -0,0 +1,24 @@
+/**
+ * Helper for making Elements with attributes
+ * @param tagName           - new Element tag name
+ * @param classNames  - list or name of CSS class
+ * @param attributes        - any attributes
+ * @returns
+ */
+export function make(tagName: string, classNames: string[] | string | null = null, attributes: { [key: string]: string | boolean } = {}): HTMLElement {
+  const el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    el.classList.add(...classNames);
+  } else if (classNames !== null) {
+    el.classList.add(classNames);
+  }
+
+  for (const attrName in attributes) {
+    if (attributes.hasOwnProperty(attrName)) {
+      (el as unknown as { [key: string]: string | boolean })[attrName] = attributes[attrName];
+    }
+  }
+
+  return el;
+}

package/src/plugins/imageTool/utils/index.ts

@@ -0,0 +1,73 @@
+ interface IConfig {
+    multiple?: boolean;
+    accept?: string;
+ }
+export function selectFiles(config = {} as IConfig): Promise<any> {
+  let fileCancle = true;
+    return new Promise((resolve, reject) => {
+      /**
+       * Create a new INPUT element
+       * @type {HTMLElement}
+       */
+      let inputElement = document.createElement('INPUT') as HTMLInputElement;
+
+      /**
+       * Set a 'FILE' type for this input element
+       * @type {string}
+       */
+      inputElement.type = 'file';
+
+      if (config.multiple) {
+        inputElement.setAttribute('multiple', 'multiple');
+      }
+
+      if (config.accept) {
+        inputElement.setAttribute('accept', config.accept);
+      }
+
+      /**
+       * Do not show element
+       */
+      inputElement.style.display = 'none';
+
+      /**
+       * Append element to the body
+       * Fix using module on mobile devices
+       */
+      document.body.appendChild(inputElement);
+
+      /**
+       * Add onchange listener for «choose file» pop-up
+       */
+      inputElement.addEventListener('change', event => {
+        console.log("选中文件")
+        fileCancle = false;
+        /**
+         * Get files from input field
+         */
+        const files = (event.target as HTMLInputElement).files;
+
+        /**
+         * Return ready to be uploaded files array
+         */
+        resolve(files);
+
+        /**
+         * Remove element from a DOM
+         */
+        document.body.removeChild(inputElement);
+      }, false);
+      window.addEventListener("focus", () => {        
+        setTimeout(() => {
+          if (fileCancle) {
+            console.log("取消选择文件")
+            resolve([]);
+          }
+        }, 1000)
+      },{once: true})
+      /**
+       * Fire click event on «input file» field
+       */
+      inputElement.click();
+    });
+  };

package/src/plugins/imageTool/utils/isPromise.ts

@@ -0,0 +1,10 @@
+import type { UploadResponseFormat } from '../types/types';
+
+/**
+ * Check if passed object is a Promise
+ * @param  object - object to check
+ * @returns
+ */
+export default function isPromise(object: Promise<UploadResponseFormat>): object is Promise<UploadResponseFormat> {
+  return object !== undefined && typeof object.then === 'function';
+}