@sadais/uploader 0.1.2

package/README.md

@@ -0,0 +1,60 @@
+## 开始
+
+```bash
+# 安装依赖
+npx yarn
+# 监听实时构建`/dist`
+npm run dev
+# 只构建`/dist`一次，不作监听
+npm run build
+```
+
+### 发布包到私服
+
+```bash
+# 登录npm服务器
+npm login --registry https://registry.npmjs.org
+# 发布
+npm publish
+```
+
+## 发布之前测试
+
+在当前工程，没有创建组件的单元测试，只能通过把构建后的东西复制到某个项目的 node_modules
+
+比如当前 package.json 的包名是 "@sadais/uploader" , 发布前要在 A 项目中测试 "@sadais/uploader", 在 A 项目的 node_modules 新建 @sadais/uploader , 再把 /dist/ 和 package.json 拷贝到 A 项目的 node_modules/@sadais/uploader
+
+使用
+
+```js
+
+import { UploaderInstance,UPLOADER_TYPE } from '@sadais/uploader';
+const uploader = new UploaderInstance(
+  {type:UPLOADER_TYPE.ALIYUN,getOptionFun:async (type) => {
+      // 获取option示例
+      const { head, data } = await apiGetUploadOption(type)
+      if (head.ret !== this.$consts.RET_CODE.SUCCESS) return null
+      return data
+  }}
+)
+
+export const apiGetUploadOption = async type => {
+  const params = {
+    storageenum: type
+  }
+  const { data } = await request.get('/api/manage/v1/storage/getstoragesignature', params)
+  return data
+}
+```
+
+## 发布完成后
+
+在 A 项目安装
+
+```bash
+# use yarn
+npx yarn add @sadais/uploader -S
+
+# use npm or pnpm
+npx pnpm install @sadais/uploader -S
+```

package/dist/index.es.js

@@ -0,0 +1,265 @@
+/*
+ * @Author: fuwenlong
+ * @Date: 2022-01-14 14:22:39
+ * @LastEditTime: 2022-01-18 16:20:57
+ * @LastEditors: zhangzhenfei
+ * @Description: 文件上传
+ */
+
+// 对象存储类型
+const UPLOADER_TYPE = {
+    ALIYUN: 'ALIYUN', // 阿里云
+    TXYUN: 'TXYUN', // 腾讯云
+    HUAWEI: 'HUAWEI', // 华为云
+};
+
+const DEFAULT_OPTIONS = {
+    // type: UPLOADER_TYPE.ALIYUN, //
+    // accessKeyId: 'LTAIXeOzClQBtKs3',
+    // bucketName: 'sadais-oss',
+    // endPoint: 'https://oss-cn-hangzhou.aliyuncs.com',
+    // path: 'file',
+    // signature: '6Y5l5k56y9VgxDU1vhsyCLC99QM=',
+    // domain: 'https://m.antibao.cn',
+    // policy:'',
+    // timeOut: 1642476191415
+};
+
+/**
+ * @param {String} params.type
+ * @param {String} params.getOptionFun
+ */
+const UploaderInstance = (function () {
+    let instance;
+    return function (params) {
+        if (!instance) {
+            instance = new SadaisUploader(params);
+        }
+        return instance;
+    };
+})();
+
+class SadaisUploader {
+    constructor(params) {
+        this._init(params);
+    }
+
+    /**
+     * 初始化
+     * @param {Object} options
+     */
+    async _init(params) {
+        this.params = params;
+        this._initOptions(params);
+    }
+
+    /**
+     * 获取配置信息
+     */
+    async _initOptions() {
+        let { type, getOptionFun } = this.params;
+
+        if (getOptionFun) {
+            const options = await getOptionFun(type);
+            if (!options) return;
+            if (options.path && !options.path.endsWith('/')) {
+                options.path = options.path + '/';
+            }
+            this.options = { ...options, type };
+        }
+    }
+
+    /**
+     * 是否超时
+     */
+    _isTimeOut() {
+        // 比服务器timeOut时间提前10s过期
+        const timeout = this.options.timeOut - 1000 * 10;
+        return new Date().getTime() > timeout;
+    }
+
+    /**
+     * 单文件上传
+     * @param {File} file
+     * @return Promise
+     */
+    async uploadFile(file) {
+        // 超时判断
+        if (this._isTimeOut()) {
+            await this._initOptions();
+        }
+        if (!file.name && file.path) {
+            const suffix = file.path.substring(file.path.lastIndexOf('.'));
+            file.name = this._guid() + suffix;
+        }
+        return new Promise((resolve, reject) => {
+            const { domain } = this.options;
+
+            // 请求地址
+            const formData = this._buildParams(file);
+
+            const apiUrl = formData.url;
+            const uploadedFilePath = `${domain}${
+                domain.endsWith('/') ? '' : '/'
+            }${formData.key}`;
+            const success = {
+                url: uploadedFilePath,
+                success: 1,
+                errMsg: 'success',
+            };
+            const error = {
+                success: 0,
+                url: file.name,
+                errMsg: 'fail',
+            };
+
+            try {
+                // uniapp
+                uni.uploadFile({
+                    url: apiUrl,
+                    filePath: file.path, // uni api提供的blob格式图片地址
+                    name: 'file',
+                    formData,
+                    success: (res) => {
+                        const { statusCode } = res;
+                        if (statusCode == 200) {
+                            resolve(success);
+                        } else {
+                            error.errMsg = res;
+                            reject(error);
+                        }
+                    },
+                    fail: (error) => {
+                        console.log(error);
+                        reject(error);
+                    },
+                });
+                // H5 input:file接收内容
+            } catch (e) {
+                console.log('uni报错，调用XMLHttpRequest', e);
+                const data = new FormData();
+                Object.keys(formData).forEach((key) => {
+                    data.append(key, formData[key]);
+                });
+                data.append('file', file);
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', apiUrl, true);
+                xhr.onreadystatechange = () => {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        if (xhr.status === 200) {
+                            resolve(success);
+                        } else {
+                            reject(error);
+                        }
+                    }
+                };
+                xhr.send(data);
+            }
+        });
+    }
+
+    /**
+     * 多文件上传
+     * @param {Array<File>} files
+     * @return Promise
+     */
+    async uploadFiles(files) {
+        const successUrls = [];
+        const failUrls = [];
+        for (const file of files) {
+            const { success, url } = await this.uploadFile(file);
+            if (success === 1) {
+                successUrls.push(url);
+            } else {
+                failUrls.push(url);
+            }
+        }
+        return { successUrls, failUrls };
+    }
+
+    // 按类型组装过参数
+    _buildParams(file) {
+        const opt = this.options;
+        const type = opt.type;
+        const params = {
+            name: file.name,
+            policy: opt.policy,
+            success_action_status: '200',
+            key: this._getUploadFilePath(file.name),
+        };
+        const endPoint = opt.endPoint
+            .replace('https://', '')
+            .replace('http://', '');
+        if (UPLOADER_TYPE.TXYUN === type) {
+            params['q-ak'] = opt.accessKeyId;
+            params['q-signature'] = opt.signature; // 签名
+            params['q-sign-algorithm'] = 'sha1'; // 签名算法
+            params['q-key-time'] = opt.param['q-sign-time'];
+            // params['q-sign-time'] = opt.param['q-sign-time']
+            params.url = `https://${opt.bucketName}.cos.${endPoint}.myqcloud.com`;
+        } else if (UPLOADER_TYPE.HUAWEI === type) {
+            params.AccessKeyId = opt.accessKeyId;
+            params.signature = opt.signature;
+            params.url = `https://${opt.bucketName}.obs.${endPoint}.myhuaweicloud.com`;
+        } else {
+            params.signature = opt.signature;
+            params.OSSAccessKeyId = opt.accessKeyId;
+            params.bucket = opt.bucketName;
+
+            params.url = `https://${opt.bucketName}.${endPoint}`;
+        }
+        return params;
+    }
+
+    /**
+     * 获取上传文件路径
+     * @param {String} name 文件名
+     * @returns
+     */
+    _getUploadFilePath(name) {
+        const { useOriginalName, path } = this.options;
+        const lastIndexOf = name.lastIndexOf('.');
+        const originalName = name.substring(0, lastIndexOf);
+        const suffix = name.substring(lastIndexOf + 1);
+        const fileName = useOriginalName ? `/${originalName}` : '';
+        // 为了保证使用文件原名时，文件不被覆盖，仍然使用随机生成方式
+        // ${this._getNowDate()}/
+        return `${path}${this._getNowDate()}/${this._guid()}${fileName}.${suffix}`;
+    }
+
+    /**
+     * 获取当前日期
+     * @returns YYYY-MM-DD
+     */
+    _getNowDate() {
+        const date = new Date();
+        const year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        if (month < 10) {
+            month = `0${month}`;
+        }
+        if (day < 10) {
+            day = `0${day}`;
+        }
+
+        return `${year}-${month}-${day}`;
+    }
+
+    /**
+     * 生成guid，用于生成随机文件名
+     * @return String
+     */
+    _guid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+            /[xy]/g,
+            function (c) {
+                var r = (Math.random() * 16) | 0,
+                    v = c == 'x' ? r : (r & 0x3) | 0x8;
+                return v.toString(16);
+            }
+        );
+    }
+}
+
+export { DEFAULT_OPTIONS, UPLOADER_TYPE, UploaderInstance };

package/dist/index.min.js

@@ -0,0 +1 @@
+"use strict";function e(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return t(e,n)}(e))||n&&e&&"number"==typeof e.length){r&&(e=r);var a=0,o=function(){};return{s:o,n:function(){return a>=e.length?{done:!0}:{done:!1,value:e[a++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,c=!0,u=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return c=e.done,e},e:function(e){u=!0,i=e},f:function(){try{c||null==r.return||r.return()}finally{if(u)throw i}}}}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t,n,r,a,o,i){try{var c=e[o](i),u=c.value}catch(e){return void n(e)}c.done?t(u):Promise.resolve(u).then(r,a)}function i(e){return function(){var t=this,n=arguments;return new Promise((function(r,a){var i=e.apply(t,n);function c(e){o(i,r,a,c,u,"next",e)}function u(e){o(i,r,a,c,u,"throw",e)}c(void 0)}))}}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}Object.defineProperty(exports,"__esModule",{value:!0});var u,s={ALIYUN:"ALIYUN",TXYUN:"TXYUN",HUAWEI:"HUAWEI"},p=function(e){return u||(u=new l(e)),u},l=function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this._init(e)}var n,a,o,u,p,l,f;return n=t,a=[{key:"_init",value:(f=i(regeneratorRuntime.mark((function e(t){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:this.params=t,this._initOptions(t);case 2:case"end":return e.stop()}}),e,this)}))),function(e){return f.apply(this,arguments)})},{key:"_initOptions",value:(l=i(regeneratorRuntime.mark((function e(){var t,n,a,o;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t=this.params,n=t.type,!(a=t.getOptionFun)){e.next=9;break}return e.next=4,a(n);case 4:if(o=e.sent){e.next=7;break}return e.abrupt("return");case 7:o.path&&!o.path.endsWith("/")&&(o.path=o.path+"/"),this.options=r(r({},o),{},{type:n});case 9:case"end":return e.stop()}}),e,this)}))),function(){return l.apply(this,arguments)})},{key:"_isTimeOut",value:function(){var e=this.options.timeOut-1e4;return(new Date).getTime()>e}},{key:"uploadFile",value:(p=i(regeneratorRuntime.mark((function e(t){var n,r=this;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!this._isTimeOut()){e.next=3;break}return e.next=3,this._initOptions();case 3:return!t.name&&t.path&&(n=t.path.substring(t.path.lastIndexOf(".")),t.name=this._guid()+n),e.abrupt("return",new Promise((function(e,n){var a=r.options.domain,o=r._buildParams(t),i=o.url,c={url:"".concat(a).concat(a.endsWith("/")?"":"/").concat(o.key),success:1,errMsg:"success"},u={success:0,url:t.name,errMsg:"fail"};try{uni.uploadFile({url:i,filePath:t.path,name:"file",formData:o,success:function(t){200==t.statusCode?e(c):(u.errMsg=t,n(u))},fail:function(e){console.log(e),n(e)}})}catch(r){console.log("uni报错，调用XMLHttpRequest",r);var s=new FormData;Object.keys(o).forEach((function(e){s.append(e,o[e])})),s.append("file",t);var p=new XMLHttpRequest;p.open("POST",i,!0),p.onreadystatechange=function(){p.readyState===XMLHttpRequest.DONE&&(200===p.status?e(c):n(u))},p.send(s)}})));case 5:case"end":return e.stop()}}),e,this)}))),function(e){return p.apply(this,arguments)})},{key:"uploadFiles",value:(u=i(regeneratorRuntime.mark((function t(n){var r,a,o,i,c,u,s,p;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:r=[],a=[],o=e(n),t.prev=3,o.s();case 5:if((i=o.n()).done){t.next=15;break}return c=i.value,t.next=9,this.uploadFile(c);case 9:u=t.sent,s=u.success,p=u.url,1===s?r.push(p):a.push(p);case 13:t.next=5;break;case 15:t.next=20;break;case 17:t.prev=17,t.t0=t.catch(3),o.e(t.t0);case 20:return t.prev=20,o.f(),t.finish(20);case 23:return t.abrupt("return",{successUrls:r,failUrls:a});case 24:case"end":return t.stop()}}),t,this,[[3,17,20,23]])}))),function(e){return u.apply(this,arguments)})},{key:"_buildParams",value:function(e){var t=this.options,n=t.type,r={name:e.name,policy:t.policy,success_action_status:"200",key:this._getUploadFilePath(e.name)},a=t.endPoint.replace("https://","").replace("http://","");return s.TXYUN===n?(r["q-ak"]=t.accessKeyId,r["q-signature"]=t.signature,r["q-sign-algorithm"]="sha1",r["q-key-time"]=t.param["q-sign-time"],r.url="https://".concat(t.bucketName,".cos.").concat(a,".myqcloud.com")):s.HUAWEI===n?(r.AccessKeyId=t.accessKeyId,r.signature=t.signature,r.url="https://".concat(t.bucketName,".obs.").concat(a,".myhuaweicloud.com")):(r.signature=t.signature,r.OSSAccessKeyId=t.accessKeyId,r.bucket=t.bucketName,r.url="https://".concat(t.bucketName,".").concat(a)),r}},{key:"_getUploadFilePath",value:function(e){var t=this.options,n=t.useOriginalName,r=t.path,a=e.lastIndexOf("."),o=e.substring(0,a),i=e.substring(a+1),c=n?"/".concat(o):"";return"".concat(r).concat(this._getNowDate(),"/").concat(this._guid()).concat(c,".").concat(i)}},{key:"_getNowDate",value:function(){var e=new Date,t=e.getFullYear(),n=e.getMonth()+1,r=e.getDate();return n<10&&(n="0".concat(n)),r<10&&(r="0".concat(r)),"".concat(t,"-").concat(n,"-").concat(r)}},{key:"_guid",value:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(e){var t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}}],a&&c(n.prototype,a),o&&c(n,o),Object.defineProperty(n,"prototype",{writable:!1}),t}();exports.DEFAULT_OPTIONS={},exports.UPLOADER_TYPE=s,exports.UploaderInstance=p;

package/package.json

@@ -0,0 +1,96 @@
+{
+    "name": "@sadais/uploader",
+    "version": "0.1.2",
+    "main": "dist/index.min.js",
+    "module": "dist/index.es.js",
+    "keywords": [
+        "sadais"
+    ],
+    "author": "sadais",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "_postinstall": "husky install",
+        "prepublishOnly": "pinst --disable",
+        "postpublish": "pinst --enable",
+        "prepublish": "npm run build",
+        "dev": "rollup -c rollup.config.js -w",
+        "build": "rollup -c rollup.config.js",
+        "deploy": "bash deploy.sh",
+        "updateTheme": "npm uninstall vuepress-theme-vdoing && rm -rf node_modules && npm i && npm i vuepress-theme-vdoing -D",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@commitlint/cli": "^13.1.0",
+        "@commitlint/config-conventional": "^13.1.0",
+        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-commonjs": "^19.0.1",
+        "@rollup/plugin-node-resolve": "^13.0.2",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
+        "@vue/babel-preset-jsx": "^1.2.4",
+        "@vue/babel-sugar-inject-h": "^1.2.2",
+        "@vue/cli-plugin-babel": "^4.5.15",
+        "@vue/cli-plugin-eslint": "^4.5.13",
+        "@vue/cli-service": "^4.5.15",
+        "@vue/compiler-sfc": "^3.1.5",
+        "@vue/eslint-config-prettier": "^6.0.0",
+        "babel-eslint": "^10.1.0",
+        "change-case": "^4.1.2",
+        "dayjs": "^1.9.7",
+        "eslint": "^6.7.2",
+        "eslint-plugin-prettier": "^3.3.1",
+        "eslint-plugin-vue": "^6.2.2",
+        "glob": "^7.1.7",
+        "husky": "^7.0.1",
+        "inquirer": "^7.1.0",
+        "json2yaml": "^1.1.0",
+        "lint-staged": "^11.1.1",
+        "pinst": "^2.1.6",
+        "plupload": "^2.3.9",
+        "prettier": "^2.3.2",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.53.3",
+        "rollup-plugin-terser": "^7.0.2"
+    },
+    "license": "MIT",
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended",
+            "@vue/prettier"
+        ],
+        "parserOptions": {
+            "parser": "babel-eslint"
+        },
+        "rules": {
+            "max-lines": [
+                "warn",
+                {
+                    "max": 400
+                }
+            ],
+            "max-params": [
+                "error",
+                {
+                    "max": 3
+                }
+            ]
+        }
+    },
+    "lint-staged": {
+        "*.{js,vue,jsx}": [
+            "prettier --write",
+            "vue-cli-service lint",
+            "git add"
+        ]
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
+    }
+}