feature

1. 支持文件名哈希化
2. 支持配置检测
3. 支持多文件选择上传

README.md

@@ -1,6 +1,14 @@
-# Cmecloud EOS Uploader
+<!--
+ * @Author: Whzcorcd
+ * @Date: 2020-09-29 19:01:15
+ * @LastEditors: Whzcorcd
+ * @LastEditTime: 2020-10-09 19:41:05
+ * @Description: file content
+-->
 
-移动云 EOS 浏览器端整合上传工具（当前默认 Bucket 为 gallery），目前限用于完成简单的图片上传
+# EOS Uploader
+
+EOS 浏览器端整合上传工具（当前默认 Bucket 为 gallery，后续可考虑开放配置），目前限用于完成简单的图片、文件上传
 
 ## usage
 
@@ -19,6 +27,7 @@ const uploader = new Uploader({
   secretAccessKey: '您的 Access Key',
   endpoint: 'Bucket 域名', // 例：eos-beijing-4.cmecloud.cn
   sslEnabled: true, // 是否开启 https
+  multiFiles: false, // 是否开启多文件选择
 })
 ```
 
@@ -33,4 +42,4 @@ const uploader = new Uploader({
 @returns {Promise}
 ```
 
-初始化后，直接调用方法即可发起上传流程，返回值为 `Promise`，上传成功后返回可访问文件的 url
+初始化后，直接调用方法即可发起上传流程，返回值为 `Promise`，上传成功后返回可访问文件的 url（其中文件名会被哈希加盐散列化，保留原后缀名）

dist/index.d.ts

@@ -2,7 +2,8 @@ interface UploaderOptions {
     accessKeyId: string;
     secretAccessKey: string;
     endpoint: string;
-    sslEnabled?: boolean;
+    sslEnabled: boolean;
+    multiFiles?: boolean;
 }
 declare class Uploader {
     private _s3?;
@@ -12,7 +13,9 @@ declare class Uploader {
     constructor(options: UploaderOptions);
     private _createUploader;
     private _removeUploader;
-    private _upload;
+    private _formatFileName;
+    private _singleUpload;
+    private _multiUpload;
     openUploader(): Promise<any>;
 }
 export default Uploader;

dist/index.js

@@ -1,5 +1,7 @@
 import { __awaiter } from "tslib";
 import S3 from 'aws-sdk/clients/s3';
+import hash from 'object-hash';
+import dayjs from 'dayjs';
 var Access;
 (function (Access) {
     Access[Access["private"] = 0] = "private";
@@ -15,29 +17,43 @@ class Uploader {
             secretAccessKey: '',
             endpoint: '',
             sslEnabled: false,
+            multiFiles: false,
         };
         this._input = undefined;
-        const currentOptions = Object.assign({}, {
+        const currentOptions = {
             apiVersion: '2006‐03‐01',
-            accessKeyId: '',
-            secretAccessKey: '',
-            endpoint: '',
+            accessKeyId: options.accessKeyId,
+            secretAccessKey: options.secretAccessKey,
+            endpoint: options.endpoint,
             s3ForcePathStyle: true,
             signatureVersion: 'v2',
-            sslEnabled: false,
-        }, options);
-        this._options = options;
+            sslEnabled: options.sslEnabled,
+        };
+        const keys = Object.values(currentOptions);
+        const integrity = keys.some(item => item === '' || item === null || item === undefined);
+        if (integrity)
+            throw new Error('请填写完整的配置信息');
+        Object.assign(this._options, options);
         this._s3 = new S3(currentOptions);
     }
     _createUploader() {
         const oldTarget = document.getElementById('file-chooser');
         if (oldTarget) {
+            if (this._options.multiFiles) {
+                oldTarget.setAttribute('multiple', '');
+            }
+            else {
+                oldTarget.removeAttribute('multiple');
+            }
             return oldTarget;
         }
         const input = window.document.createElement('input');
         input.setAttribute('id', 'file-chooser');
         input.setAttribute('type', 'file');
         input.setAttribute('style', 'visibility: hidden;position: absolute;width: 1px;height: 1px;');
+        if (this._options.multiFiles) {
+            input.setAttribute('multiple', '');
+        }
         document.getElementsByTagName('body')[0].appendChild(input);
         const target = document.getElementById('file-chooser');
         target.addEventListener('click', () => {
@@ -52,7 +68,16 @@ class Uploader {
         }
         this._input = undefined;
     }
-    _upload() {
+    _formatFileName(file) {
+        const fileHash = hash({
+            name: file.name,
+            timestamp: dayjs().format('{YYYY} MM-DD HH:mm:ss'),
+            salt: Math.random(),
+        }, { algorithm: 'sha1' });
+        const fileSuffix = file.name.split('.').slice(-1)[0];
+        return { fileHash, fileSuffix };
+    }
+    _singleUpload() {
         if (!this._input)
             return Promise.reject('请先构造 Uploader');
         const file = this._input.files ? this._input.files[0] : null;
@@ -61,8 +86,9 @@ class Uploader {
                 return reject('SDK 加载失败');
             const $S = this._s3;
             if (file) {
+                const { fileHash, fileSuffix } = this._formatFileName(file);
                 const params = {
-                    Key: file.name,
+                    Key: `${fileHash}.${fileSuffix}`,
                     Bucket: this._bucket,
                     Body: file,
                     ACL: 'public-read',
@@ -71,23 +97,67 @@ class Uploader {
                     if (err) {
                         return reject(err);
                     }
-                    return resolve(`${this._options.sslEnabled ? 'https' : 'http'}://${this._options.endpoint}/${this._bucket}/${file.name}`);
+                    return resolve(`${this._options.sslEnabled ? 'https' : 'http'}://${this._options.endpoint}/${this._bucket}/${fileHash}.${fileSuffix}`);
                 });
             }
             else {
                 return reject('无上传内容');
             }
         });
     }
+    _multiUpload() {
+        if (!this._input)
+            return Promise.reject('请先构造 Uploader');
+        const files = this._input.files ? this._input.files : null;
+        console.log(files);
+        return new Promise((resolve, reject) => {
+            if (!this._s3)
+                return reject('SDK 加载失败');
+            const $S = this._s3;
+            const urls = [];
+            if (files) {
+                const filesListLength = files.length;
+                for (const item of files) {
+                    const { fileHash, fileSuffix } = this._formatFileName(item);
+                    const params = {
+                        Key: `${fileHash}.${fileSuffix}`,
+                        Bucket: this._bucket,
+                        Body: item,
+                        ACL: 'public-read',
+                    };
+                    $S.putObject(params, (err, data) => {
+                        if (err) {
+                            return reject(err);
+                        }
+                        urls.push(`${this._options.sslEnabled ? 'https' : 'http'}://${this._options.endpoint}/${this._bucket}/${fileHash}.${fileSuffix}`);
+                        if (urls.length === filesListLength)
+                            return resolve(urls);
+                    });
+                }
+            }
+            else {
+                return reject('无上传内容');
+            }
+        });
+    }
     openUploader() {
         return new Promise((resolve, reject) => {
             this._input = this._createUploader();
             this._input.addEventListener('change', (e) => __awaiter(this, void 0, void 0, function* () {
                 e.preventDefault();
-                const res = yield this._upload().catch(err => {
-                    this._removeUploader();
-                    reject(err);
-                });
+                let res;
+                if (this._options.multiFiles) {
+                    res = yield this._multiUpload().catch(err => {
+                        this._removeUploader();
+                        reject(err);
+                    });
+                }
+                else {
+                    res = yield this._singleUpload().catch(err => {
+                        this._removeUploader();
+                        reject(err);
+                    });
+                }
                 this._removeUploader();
                 return resolve(res);
             }), false);

example/src/App.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: Whzcorcd
+ * @Date: 2020-10-09 10:03:16
+ * @LastEditors: Whzcorcd
+ * @LastEditTime: 2020-10-09 19:40:34
+ * @Description: file content
+-->
 <template>
   <div id="app">
     <button @click="openUploader">open uploader</button>
@@ -15,7 +22,8 @@ export default {
         accessKeyId: '',
         secretAccessKey: '',
         endpoint: 'eos-beijing-4.cmecloud.cn',
-        sslEnabled: false
+        sslEnabled: false,
+        multiFiles: true
       })
       const res = await uploader.openUploader()
       console.log(res)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gdyfe/uploader",
-  "version": "1.1.3",
+  "version": "1.2.3",
   "main": "dist/index.js",
   "author": "Whzcorcd <whzcorcd@gmail.com>",
   "license": "ISC",
@@ -16,12 +16,15 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "3.1.1",
     "@types/node": "^14.11.2",
+    "@types/object-hash": "^1.3.3",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.0.1",
     "typescript": "^4.0.3"
   },
   "dependencies": {
-    "aws-sdk": "^2.762.0"
+    "aws-sdk": "^2.762.0",
+    "dayjs": "^1.9.1",
+    "object-hash": "^2.0.3"
   }
 }