xianniu-ui 0.5.8 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {
@@ -21,7 +21,9 @@
     "public"
   ],
   "dependencies": {
+    "ali-oss": "^6.17.1",
     "core-js": "^3.6.5",
+    "uuid": "^9.0.0",
     "vue": "^2.7.14",
     "vue-lottie": "^0.2.1",
     "vue-router": "^3.2.0",
@@ -34,7 +36,6 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/component-compiler-utils": "^2.6.0",
-    "axios": "^1.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-module-resolver": "^2.7.1",

package/packages/upload/main.vue

@@ -15,7 +15,6 @@
     :on-error="onError"
     :before-upload="onBeforeUpload"
     :style="styles"
-    :headers="uploadHeaders"
     :on-exceed="onExceed"
     :on-change="onChange"
   >
@@ -98,9 +97,9 @@
 
 <script>
 import ElImageViewer from "element-ui/packages/image/src/image-viewer";
-import axios from "axios";
+import Client from "@/oss";
 import uploadPop from "./upload-pop.vue";
-const MAX_WARNING = 1024 * 10 * 1024;
+// const MAX_WARNING = 1024 * 10 * 1024;
 export default {
   name: "XnUpload",
   inheritAttrs: false,
@@ -113,10 +112,6 @@ export default {
       type: String,
       default: "picture-card",
     },
-    hiddenUpload: {
-      type: Boolean,
-      default: false,
-    },
     preview: {
       type: Boolean,
       default: false,
@@ -136,22 +131,11 @@ export default {
     },
     accept: {
       type: [Array, String],
-      default: () => ["jpg", "jpeg", "png", "pdf"],
+      default: () => "*",
     },
     maxSize: {
       type: Number,
-      default: 1024 * 200 * 1024, // 最大限制 50M
-    },
-    compress: {
-      type: Number,
-      default: 0,
-    },
-    type: {
-      type: String,
-      default: "front",
-      validator: (val) => {
-        return ["front", "back"].includes(val);
-      },
+      default: 1024 * 200 * 1024, // 最大限制 200M
     },
     styles: {
       type: Object,
@@ -163,17 +147,13 @@ export default {
       isShowImageView: false,
       imageView: "",
       isHidden: false,
-      // actionParams: {
-      //   action: '',
-      // },
-      uploadHeaders: {
-        xnToken: "",
-      },
       viewList: [],
       files: [],
       successFiles: [],
       isUploading: false,
       file: {},
+      oss: null,
+      client: null,
     };
   },
   computed: {
@@ -190,89 +170,93 @@ export default {
     fileList: {
       handler(n) {
         this.successFiles = n;
-        if (this.limit === n.length) {
-          this.isHidden = true;
-        } else {
-          this.isHidden = false;
-        }
+        this.isHidden = this.limit === n.length;
       },
       immediate: true,
     },
   },
-  created() {},
+  created() {
+    this.client = new Client({
+      stsUrl: this.$XN.stsUrl || "",
+    });
+  },
   beforeDestroy() {
     this.$emit("update:fileList", []);
   },
   methods: {
-    onBeforeUpload(file) {
-      let fileExt = file.name.substring(file.name.lastIndexOf(".") + 1);
-      // 判断上传格式
-      fileExt = `${fileExt}`.toLowerCase();
-      if (!this.accept.includes(fileExt) && this.accept !== "*") {
-        this.$message.warning(`请上传指定格式【${this.accept}】`);
-        return false;
-      }
+    async onBeforeUpload(file) {
       this.file = file;
-      if (file.size > MAX_WARNING) {
-        this.bigFileWarning();
-      }
-      return this.onExceedSize(file.size);
+      return Promise.all([
+        this.checkFileExt(file),
+        this.onExceedSize(file.size),
+        this.getStsToken(),
+      ])
+        .then(() => {
+          return Promise.resolve();
+        })
+        .catch((err) => {
+          return Promise.reject(err);
+        });
+    },
+    async getStsToken() {
+      return new Promise((resolve, reject) => {
+        this.client
+          .getStsToken()
+          .then((res) => {
+            this.oss = res;
+            resolve();
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      });
+    },
+    checkFileExt(file) {
+      return new Promise((resolve, reject) => {
+        let fileExt = file.name.substring(file.name.lastIndexOf(".") + 1);
+        // 判断上传格式
+        fileExt = `${fileExt}`.toLowerCase();
+        if (!this.accept.includes(fileExt) && this.accept !== "*") {
+          this.$message.warning(`请上传指定格式【${this.accept}】`);
+          reject();
+        }
+        resolve();
+      });
     },
     onExceedSize(size) {
-      if (size > this.maxSize) {
-        this.$message.warning(
-          `最大不能超过${this.$format.bytesToSize(this.maxSize)}`
-        );
-        return Promise.reject();
-      }
-      return Promise.resolve();
+      return new Promise((resolve, reject) => {
+        if (size > this.maxSize) {
+          this.$message.warning(
+            `最大不能超过${this.$format.bytesToSize(this.maxSize)}`
+          );
+          reject();
+        }
+        resolve();
+      });
     },
     onChange(file, fileList) {
       this.files = fileList;
     },
     async onHttpUpload(file) {
-      const formData = new FormData();
-      const _file = file.file;
-      formData.append("file", _file);
       this.isUploading = true;
       this.$emit("on-uploaded", false);
-      axios({
-        method: "post",
-        url: this.$XN.uploadUrl || "",
-        data: formData,
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          xnToken: this.$storage.get("xnToken"),
-        },
-        onUploadProgress: (progress) => {
-          let _progress = Math.round((progress.loaded / progress.total) * 100);
-          _progress = _progress === 100 ? 99 : _progress;
-          file.onProgress({ percent: _progress });
-        },
-      })
+      this.oss
+        .upload(file)
         .then((res) => {
-          const { name, size, ext, imgFlag, url, fileId } = res.data.data;
-          this.successFiles.push({ name, size, ext, imgFlag, url, fileId });
-          file.onSuccess();
+          this.successFiles.push(res);
           this.$emit("update:fileList", this.successFiles);
           this.$emit("on-success", this.successFiles);
           this.$emit("on-uploaded", true);
           this.isUploading = false;
-          if (this.file.size > MAX_WARNING) {
-            this.$notify.closeAll();
-            this.bigFileSucces();
-          }
         })
         .catch((err) => {
           console.log(err);
-          this.$notify.closeAll();
           this.$emit("update:fileList", this.successFiles);
-          file.onError();
         });
     },
 
-    onError() {
-      // console.log(err);
+    onError(err) {
+      console.log(err);
       this.$message.error("上传失败，请重试");
     },
     onSubmitUpload() {
@@ -281,7 +265,6 @@ export default {
     onAbort() {
       this.$refs.upload.abort();
     },
-
     onExceed() {
       this.$message.warning(`上传总数不能超过【${this.limit}】个`);
     },
@@ -327,25 +310,8 @@ export default {
     closeViewer() {
       this.isShowImageView = false;
     },
-    bigFileWarning() {
-      return this.$notify({
-        title: "提示",
-        duration: 0,
-        dangerouslyUseHTMLString: true,
-        message: `
-        <p class="text-primary">当前文件体积过大，请您耐心等待，在此期间请勿刷新页面。</p>
-        <p>名称：${this.file.name}</p>
-        <p>体积：${this.fileSize}</p>
-        `,
-        type: "warning",
-      });
-    },
-    bigFileSucces() {
-      return this.$notify({
-        title: "提示",
-        message: "上传成功",
-        type: "success",
-      });
+    abortUpload() {
+      return this.oss.oss.cancel();
     },
   },
 };

package/packages/upload/upload-pop.vue

@@ -1,21 +1,21 @@
 <template>
   <el-popover width="300" trigger="hover">
     <el-form label-width="80px" size="mini">
-      <el-form-item label="文件名">
+      <el-form-item label="文件名" class="mb-5">
         <div :title="file.name" class="tip-filename">
           {{ file.name }}
         </div>
       </el-form-item>
-      <el-form-item label="文件大小">
+      <el-form-item label="文件大小" class="mb-0">
         {{ $format.bytesToSize(file.size) }}
       </el-form-item>
-      <el-form-item label="文件格式">
+      <el-form-item label="文件格式" class="mb-0">
         {{ file.ext }}
       </el-form-item>
-      <el-form-item label="文件类型">
+      <el-form-item label="文件类型" class="mb-0">
         {{ file.imgFlag ? "图片" : "文件" }}
       </el-form-item>
-      <el-form-item label="操作">
+      <el-form-item label="操作" class="mb-0">
         <el-link
           type="primary"
           :underline="false"

package/src/area/index.js

@@ -12857,10 +12857,10 @@ export default [{
     'cityCode': '710000',
     'subCitys': [{
         'cityName': '全部',
-        'cityCode': '710001',
+        'cityCode': '710100',
         'subCitys': [{
             'cityName': '全部',
-            'cityCode': '710001',
+            'cityCode': '710101',
         }]
     }]
 },
@@ -12869,10 +12869,10 @@ export default [{
     'cityCode': '810000',
     'subCitys': [{
         'cityName': '全部',
-        'cityCode': '810000',
+        'cityCode': '810100',
         'subCitys': [{
             'cityName': '全部',
-            'cityCode': '810000',
+            'cityCode': '810101',
         }]
     }]
 },
@@ -12881,10 +12881,10 @@ export default [{
     'cityCode': '820000',
     'subCitys': [{
         'cityName': '全部',
-        'cityCode': '820000',
+        'cityCode': '820100',
         'subCitys': [{
             'cityName': '全部',
-            'cityCode': '820000',
+            'cityCode': '820101',
         }]
     }]
 }]

package/src/oss/index.js

@@ -0,0 +1,93 @@
+const OSS = require('ali-oss')
+import $dayjs from '@/utils/dayjs'
+const { v4: uuidv4 } = require('uuid');
+
+class Client {
+    constructor(params = {}) {
+        this.uploadHost = null
+        this.token = localStorage.getItem('xnToken')
+        this.stsUrl = params.stsUrl || ''
+        this.oss = null
+    }
+    _getToken() {
+        const _token = localStorage.getItem('xnToken')
+        let token = ''
+        if (_token) {
+            try {
+                token = JSON.parse(_token)
+            } catch (error) {
+                token = _token
+            }
+        }
+        return token
+    }
+    getExt(file) {
+        let fileExt = file.name.substring(file.name.lastIndexOf(".") + 1);
+        // 判断上传格式
+        return `${fileExt}`.toLowerCase();
+    }
+    isImg(file) {
+        return ~~file.type.indexOf('image') > -1
+    }
+    getFileNameUUID() {
+        const uuid = uuidv4()
+        return uuid
+    }
+    getStsToken() {
+        return new Promise((resolve, reject) => {
+            if (!this.stsUrl) {
+                return console.error('获取临时凭证地址不能为空')
+            }
+            fetch(this.stsUrl + '?xnToken=' + this.token).then(response => response.json()).then((res) => {
+                const { data: { accessKeyId, accessKeySecret, securityToken: stsToken, uploadHost, bucket, region } } = res
+                const obj = {
+                    accessKeyId,
+                    accessKeySecret,
+                    stsToken,
+                    uploadHost,
+                    bucket,
+                    region
+                }
+               this.uploadHost = uploadHost
+                this.oss = new OSS({
+                    ...obj,
+                })
+                resolve(this)
+            }).catch((err) => {
+                reject(err)
+            })
+
+        })
+    }
+    upload(file, headers = {}) {
+        const currentFile = file.file
+        const fileName = currentFile.name
+        const newFileName = this.getFileNameUUID() + '.' + this.getExt(currentFile)
+        const path = `accessory/${$dayjs().format('YYYY/MM/DD')}/`
+        return new Promise((resolve, reject) => {
+            this.oss.multipartUpload(path + newFileName, currentFile, {
+                ...headers,
+                progress(p) {
+                    const _progress = parseFloat(p * 100)
+                    file.onProgress({ percent: _progress });
+                }
+            }).then(res => {
+                file.onSuccess()
+                const obj = {
+                    name: fileName,
+                    size: currentFile.size,
+                    ext: this.getExt(currentFile),
+                    imgFlag: this.isImg(currentFile),
+                    url: this.uploadHost + res.name,
+                }
+                resolve(obj)
+            }).catch(err => {
+                file.onError();
+                reject(err)
+            })
+        })
+    }
+}
+
+
+export default Client