@ebl-vue/editor-full 1.0.13 → 1.1.2

package/src/plugins/imageTool/uploader.ts

@@ -1,9 +1,9 @@
-import ajax from '@codexteam/ajax';
-import type { AjaxResponse } from '@codexteam/ajax';
+
 import isPromise from './utils/isPromise';
 import type { IUploadResponseFormat, UploadOptions } from './types/types';
 import type { UploadResponseFormat, ImageConfig } from './types/types';
-import axios, { AxiosInstance, InternalAxiosRequestConfig } from "axios";
+import axios, { AxiosInstance } from "axios";
+import { selectFiles } from './utils/index';
 /**
  * Params interface for Uploader constructor
  */
@@ -55,8 +55,8 @@ export default class Uploader {
    * Fires ajax.transport()
    * @param onPreview - callback fired when preview is ready
    */
-  public async uploadSelectedFile({ onPreview }: UploadOptions) {
-    
+  public async uploadSelectedFile({ onPreview, noSelectedFile }: UploadOptions) {
+
     const preparePreview = function (file: File): void {
       const reader = new FileReader();
 
@@ -70,59 +70,70 @@ export default class Uploader {
      * Custom uploading
      * or default uploading
      */
-    let upload: Promise<UploadResponseFormat>;
+
     let cdn: string = "";
     let objectKey: string = "";
 
-    // custom uploading
-    if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') {
-      const uploadByFile = this.config.uploader.uploadByFile;
 
-      upload = ajax.selectFiles({ accept: this.config.types ?? 'image/*' }).then((files: File[]) => {
-        preparePreview(files[0]);
 
-        const customUpload = uploadByFile(files[0]);
+    //选获取上传文件的地址
+    const files = await selectFiles({ accept: this.config.types ?? 'image/*' });
 
-        if (!isPromise(customUpload)) {
-          console.warn('Custom uploader method uploadByFile should return a Promise');
-        }
+    if (files && files.length > 0) {
+      preparePreview(files[0]);
+    } else {
+      noSelectedFile();
+      return
+    }
+    const file = files[0];
+    const fileTypes = this.config.types.split(",");
+    let suffixIndex = file.name.lastIndexOf(".");
+    let suffix = file.name.slice(suffixIndex);
 
-        return customUpload;
-      });
+    if (!fileTypes.includes(suffix.toLowerCase())) {
+      this.onError("文件类型不支持");
+      return;
+    }
 
-      // default uploading
-    } else {
-      //选获取上传文件的地址
-      const files = await ajax.selectFiles({ accept: this.config.types ?? 'image/*' });
-      if (files && files.length > 0) {
-        preparePreview(files[0]);
-      }
-      const file = files[0];
-      const uploadBodyRes = await ajax.post({
-        url: this.config.endpoints.byFile,
-        data: Object.assign({
-          "fileName": file.name,
-          "contentType": file.type
-        }, this.config.additionalRequestData),
-        type: ajax.contentType.JSON,
-        
-      });
-      const uploadRes = uploadBodyRes.body as IUploadResponseFormat;
-      if (!uploadRes.success) {
-        this.onError(uploadRes.message!);
-        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
       }
-      console.log(uploadRes);
-      cdn = uploadRes.data.cdn;
-      objectKey = uploadRes.data.objectKey;
-      const axiosInstance: AxiosInstance = axios.create({
-        timeout: 1800000,
-        headers: { "Content-Type": file.type },
-      });
-      upload = axiosInstance.put(uploadRes.data.presignedUrl, file);
-
+    }
+    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.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;
+
+    let upload = axiosInstance.put(uploadRes.data.presignedUrl, file);
+
+
+
 
     upload.then((response) => {
       if (response.status === 200) {
@@ -144,35 +155,46 @@ export default class Uploader {
    */
   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"
+    })
+
 
-    /**
-     * Custom uploading
-     */
-    if (this.config.uploader && typeof this.config.uploader.uploadByUrl === 'function') {
-      upload = this.config.uploader.uploadByUrl(url);
 
-      if (!isPromise(upload)) {
-        console.warn('Custom uploader method uploadByUrl should return a Promise');
+
+    upload.then((response) => {
+      
+      if(response.status !== 200||response.data.success===false){
+        this.onError(response.data.message!);
+        return;
       }
-    } else {
-      /**
-       * Default uploading
-       */
-      upload = ajax.post({
-        url: this.config.endpoints.byUrl,
-        data: Object.assign({
-          url: url,
-        }, this.config.additionalRequestData),
-        type: ajax.contentType.JSON,
-        headers: this.config.additionalRequestHeaders as Record<string, string>,
-      }).then((response: AjaxResponse) => response.body as UploadResponseFormat);
-    }
+      
+      let cdn = response.data.data.cdn;
+      let objectKey = response.data.data.objectKey;
 
-    upload.then((response: UploadResponseFormat) => {
-      this.onUpload(response);
+      let res = {
+        success: 1,
+        file: { url: cdn + objectKey }
+      };
+      this.onUpload(res);
     }).catch((error: string) => {
       this.onError(error);
     });
+
   }
 
   /**
@@ -181,51 +203,63 @@ export default class Uploader {
    * @param file - file pasted by drag-n-drop
    * @param onPreview - file pasted by drag-n-drop
    */
-  public uploadByFile(file: Blob, { onPreview }: UploadOptions): void {
-    /**
-     * Load file for preview
-     */
-    const reader = new FileReader();
+  public async uploadByFile(file: Blob, { onPreview }: UploadOptions) {
 
-    reader.readAsDataURL(file);
-    reader.onload = (e) => {
-      onPreview((e.target as FileReader).result as string);
-    };
 
-    let upload: Promise<UploadResponseFormat>;
+    const fileTypes = this.config.types.split(",");
 
-    /**
-     * Custom uploading
-     */
-    if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') {
-      upload = this.config.uploader.uploadByFile(file);
+    let suffixIndex = file.name.lastIndexOf(".");
+    let suffix = file.name.slice(suffixIndex);
 
-      if (!isPromise(upload)) {
-        console.warn('Custom uploader method uploadByFile should return a Promise');
-      }
-    } else {
-      /**
-       * Default uploading
-       */
-      const formData = new FormData();
+    if (!fileTypes.includes(suffix.toLowerCase())) {
+      this.onError("文件类型不支持");
+      return;
+    }
 
-      formData.append(this.config.field ?? 'image', file);
 
-      if (this.config.additionalRequestData && Object.keys(this.config.additionalRequestData).length) {
-        Object.entries(this.config.additionalRequestData).forEach(([name, value]: [string, string | Blob]) => {
-          formData.append(name, value);
-        });
+
+    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";
 
-      upload = ajax.post({
-        url: this.config.endpoints.byFile,
-        data: formData,
-        type: ajax.contentType.JSON,
-        headers: this.config.additionalRequestHeaders as Record<string, string>,
-      }).then((response: AjaxResponse) => response.body as UploadResponseFormat);
+    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);
+    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) => {
+      if (response.status === 200) {
+        response = {
+          success: 1,
+          file: { url: cdn + objectKey }
+        }
+      }
       this.onUpload(response);
     }).catch((error: string) => {
       this.onError(error);

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

@@ -0,0 +1,73 @@
+ interface IConfig {
+    multiple?: boolean;
+    accept?: string;
+ }
+export function selectFiles(config = {} as IConfig): Promise<File[]> {
+  let fileCancle = true;
+    return new Promise((resolve, reject) => {
+      /**
+       * Create a new INPUT element
+       * @type {HTMLElement}
+       */
+      let inputElement = document.createElement('INPUT');
+
+      /**
+       * 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.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/utils/AxiosService.ts

@@ -0,0 +1,87 @@
+import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from "axios";
+import { ElMessage } from "element-plus"
+
+
+interface IAxiosServiceConstructorParams{
+  appBaseApi?: string,
+  timeout?:number,
+  eblStoreUser?: any|undefined
+}
+
+class AxiosService {
+  appBaseApi: string = "";
+  timeout: number = 30000;
+  eblStoreUser: any|undefined;
+  axiosInstance: AxiosInstance | undefined;
+
+  constructor(params?: IAxiosServiceConstructorParams | undefined ) {
+    if (typeof params !== "undefined") {
+      if (params.appBaseApi) {
+        this.appBaseApi = params.appBaseApi;
+      }
+  
+      if (params.timeout) {
+        this.timeout = params.timeout;
+      }
+      if (params.eblStoreUser) {
+        this.eblStoreUser = params.eblStoreUser;
+      }
+      
+      
+    }    
+  }
+  createAxios():AxiosInstance {
+    //创建实例
+    this.axiosInstance = axios.create({
+      baseURL: this.appBaseApi,
+      timeout: this.timeout,
+      headers: { "Content-Type": "application/json;charset=utf-8" },
+    });
+    //请求拦截
+    this.axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+      
+      if (this.eblStoreUser) {
+        const token = this.eblStoreUser.token;
+        const tokenName = this.eblStoreUser.tokenName;
+        const tokenPrefix = this.eblStoreUser.tokenPrefix;
+        if (token && tokenName) {
+          config.headers[tokenName] = tokenPrefix + " " + token;
+        }
+      }      
+      return config;
+    }, (error: any) => {
+      return Promise.reject(error);
+    });
+    
+    // 响应拦截器
+    this.axiosInstance.interceptors.response.use((response: AxiosResponse) => {
+      const { code, message } = response.data;
+      if (code === 1) {
+        return response.data;
+      }
+      ElMessage.error(message || "系统出错");
+      return response.data;
+    }, (error: any) => {
+      if (error) {
+        const { message } = error;
+        ElMessage.error(message || "系统出错");
+      }
+      return Promise.reject(error.message);
+    });
+    return this.axiosInstance;
+  }
+
+  static instance(appBaseApi: string|undefined, timeout: number, eblStoreUser?: any) {
+    let options:any = { appBaseApi: appBaseApi, timeout: timeout };
+    if (eblStoreUser) {
+      options.eblStoreUser = eblStoreUser;
+    }
+    let service = new AxiosService(options);
+    return service.createAxios();
+  }
+
+
+}
+export default AxiosService;
+type IAxiosService = InstanceType<typeof AxiosService>;
+export { IAxiosService }

package/types/index.d.ts

@@ -4,15 +4,20 @@
 
 import type { INSTALLED_KEY } from '@/constants'
 
+
 declare module 'vue' {
   export interface App {
     [INSTALLED_KEY]?: boolean
   }
-  
+   export interface GlobalComponents {
+   EblEditor: typeof import('@ebl-vue/editor-full')['EblEditor'],
+    
+  }
 };
 
 
 export interface IEblEditorSettings{
   fileUploadEndpoint: string;
   urlUploadEndpoint: string;
+  userStore: any;
 }