xianniu-ui 0.5.2 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xianniu-ui",
-  "version": "0.5.2",
+  "version": "0.5.5",
   "private": false,
   "main": "lib/xianniu-ui.umd.min.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/component-compiler-utils": "^2.6.0",
-    "axios": "^0.26.1",
+    "axios": "^1.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-module-resolver": "^2.7.1",

package/packages/style/src/upload.scss

@@ -78,6 +78,7 @@
             height: 80px;
             line-height: 80px;
             font-size: 14px;
+            position: relative;
             .el-upload-list__item {
                 width: 80px;
                 height: 80px;
@@ -92,31 +93,31 @@
                     font-size: 20px;
                 }
             }
-            .process {
-                position: absolute;
-                left: 0;
-                top: 0;
-                background: rgba($color: #000000, $alpha: 0.4);
-                width: 100%;
-                height: 100%;
-
-                .el-progress {
-                    width: 40%;
-                    height: auto;
-                    .el-progress-circle {
-                        width: 99% !important;
-                        height: 99% !important;
-                    }
-                    .el-progress__text {
-                        color: #fff;
-                        font-size: 12px !important;
-                    }
-                }
-            }
+            
         }
     }
     &--slot {
         height: 100%;
+        .process {
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: rgba($color: #000000, $alpha: 0.4);
+            width: 100%;
+            height: 100%;
+            .el-progress {
+                width: 70%;
+                height: auto;
+                .el-progress-circle {
+                    width: 99% !important;
+                    height: 99% !important;
+                }
+                .el-progress__text {
+                    color: #fff !important;
+                    font-size: 12px !important;
+                }
+            }
+        }
         &__ext {
             position: absolute;
             bottom: 0;

package/packages/upload/main.vue

@@ -3,7 +3,7 @@
     ref="upload"
     :class="{
       'is-disabled': $attrs.disabled != undefined,
-      'is-hidden': preview
+      'is-hidden': preview,
     }"
     class="xn-upload xn-upload-main"
     action="###"
@@ -26,7 +26,9 @@
     </template>
     <template v-else>
       <slot>
-        <el-button icon="el-icon-upload" :disabled="$attrs.disabled">上传</el-button>
+        <el-button icon="el-icon-upload" :disabled="$attrs.disabled"
+          >上传</el-button
+        >
       </slot>
     </template>
     <div
@@ -36,26 +38,26 @@
       v-if="listType === 'picture-card'"
     >
       <uploadPop :file="file" @on-download="handleDownload(file)"></uploadPop>
-        <template v-if="$utils.isImg(file)">
-          <el-image
-            class="el-upload-list__item-thumbnail"
-            :src="file.url"
-            fit="cover"
-            :lazy="true"
-          />
-        </template>
-        <template v-else>
-          <div class="xn-upload-list__item-file">
-            <div class="annex">
-              <i class="el-icon el-icon-folder" />
-              <span class="label">附件</span>
-            </div>
-            <div class="file-name">{{ file.name }}</div>
+      <template v-if="$utils.isImg(file)">
+        <el-image
+          class="el-upload-list__item-thumbnail"
+          :src="file.url"
+          fit="cover"
+          :lazy="true"
+        />
+      </template>
+      <template v-else>
+        <div class="xn-upload-list__item-file">
+          <div class="annex">
+            <i class="el-icon el-icon-folder" />
+            <span class="label">附件</span>
           </div>
-        </template>
+          <div class="file-name">{{ file.name }}</div>
+        </div>
+      </template>
       <div v-if="file.status === 'uploading'" class="process">
         <el-progress
-          :status="file.percentage === 100 ? 'success' : null"
+          :status="file.percentage === 100 && !isUploading ? 'success' : null"
           type="circle"
           :percentage="process(file.percentage)"
           :stroke-width="6"
@@ -126,19 +128,19 @@ export default {
 
     limit: {
       type: Number,
-      default: 1,
+      default: 9,
     },
     tip: {
       type: String,
       default: "",
     },
     accept: {
-      type: [Array,String],
+      type: [Array, String],
       default: () => ["jpg", "jpeg", "png", "pdf"],
     },
     maxSize: {
       type: Number,
-      default: 1024 * 5 * 1024, // 最大限制 5M
+      default: 1024 * 50 * 1024, // 最大限制 50M
     },
     compress: {
       type: Number,
@@ -170,6 +172,8 @@ export default {
       viewList: [],
       files: [],
       successFiles: [],
+      isUploading: false,
+      file: {},
     };
   },
   computed: {
@@ -178,6 +182,9 @@ export default {
         return Math.floor(num);
       };
     },
+    fileSize() {
+      return this.$format.bytesToSize(this.file.size);
+    },
   },
   watch: {
     fileList: {
@@ -192,62 +199,43 @@ export default {
       immediate: true,
     },
   },
-  created() {
-  },
+  created() {},
   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 !== '*') {
+      if (!this.accept.includes(fileExt) && this.accept !== "*") {
         this.$message.warning(`请上传指定格式【${this.accept}】`);
         return false;
       }
+      this.file = file;
+      if (file.size > 1024 * 1 * 1024) {
+        this.bigFileWarning();
+      }
+      return this.onExceedSize(file.size);
     },
-    // handleCompress(file) {
-    //   const { compress } = this;
-    //   const _maxSize = parseFloat(this.maxSize);
-    //   let size = 0;
-    //   if (compress) {
-    //     size = compress;
-    //   } else {
-    //     size = file.size > _maxSize ? _maxSize / 1024 : file.size;
-    //   }
-    //   // return new Promise((resolve) => {
-    //   //   imageConversion["compressAccurately"](file, size).then((result) => {
-    //   //     resolve(result);
-    //   //   });
-    //   // });
-    // },
-    onExceedSize(size, maxSize) {
-      if (size > maxSize) {
+    onExceedSize(size) {
+      if (size > this.maxSize) {
         this.$message.warning(
-          `最大不能超过${this.$utils.bytesToSize(maxSize)}`
+          `最大不能超过${this.$format.bytesToSize(this.maxSize)}`
         );
-        return false;
+        return Promise.reject();
       }
-      return true;
+      return Promise.resolve();
     },
     onChange(file, fileList) {
       this.files = fileList;
     },
     async onHttpUpload(file) {
       const formData = new FormData();
-      // let result = null;
-      // if (this.$utils.isImg(file.file.name)) {
-      //   result = await this.handleCompress(file.file);
-      //   var newFile = new window.File([result], file.file.name, {
-      //     type: file.file.type,
-      //   });
-      // }
       const _file = file.file;
       formData.append("file", _file);
-
+      this.$emit("on-uploading");
+      this.isUploading = true;
       axios({
         method: "post",
         url: this.$XN.uploadUrl || "",
@@ -256,22 +244,28 @@ export default {
           "Content-Type": "application/x-www-form-urlencoded",
           xnToken: this.$storage.get("xnToken"),
         },
-        onUploadProgress(progress) {
-          const _progress = Math.round(
-            (progress.loaded / progress.total) * 100
-          );
+        onUploadProgress: (progress) => {
+          let _progress = Math.round((progress.loaded / progress.total) * 100);
+          _progress = _progress === 100 ? 99 : _progress;
           file.onProgress({ percent: _progress });
         },
       })
         .then((res) => {
-          const { name, size, ext, imgFlag, url,fileId } = res.data.data;
-          this.successFiles.push({name,size,ext,imgFlag,url,fileId});
+          const { name, size, ext, imgFlag, url, fileId } = res.data.data;
+          this.successFiles.push({ name, size, ext, imgFlag, url, fileId });
           file.onSuccess();
           this.$emit("update:fileList", this.successFiles);
           this.$emit("on-success", this.successFiles);
+          this.$emit("on-uploaded");
+          this.isUploading = false;
+          if (this.file.size > 1024 * 1 * 1024) {
+            this.$notify.closeAll()
+            this.bigFileSucces();
+          }
         })
-        .catch(() => {
-          // console.log(err);
+        .catch((err) => {
+          console.log(err);
+          this.$notify.closeAll()
           this.$emit("update:fileList", this.successFiles);
           file.onError();
         });
@@ -297,15 +291,23 @@ export default {
         this.imageView = file.url;
       });
     },
-    async handleDownload({ url }) {
-      const elt = document.createElement("a");
-      elt.setAttribute("href", url);
-      elt.setAttribute("download", "下载文件");
-      elt.style.display = "none";
-      elt.target = "_blank";
-      document.body.appendChild(elt);
-      elt.click();
-      document.body.removeChild(elt);
+    async handleDownload(file) {
+      const { url, name } = file;
+      const x = new XMLHttpRequest();
+      x.open("GET", url, true);
+      x.responseType = "blob";
+      x.onload = function () {
+        const _url = window.URL.createObjectURL(x.response);
+        const elt = document.createElement("a");
+        elt.setAttribute("href", _url);
+        elt.setAttribute("download", name);
+        elt.style.display = "none";
+        elt.target = "_blank";
+        document.body.appendChild(elt);
+        elt.click();
+        document.body.removeChild(elt);
+      };
+      x.send();
     },
     handleRemove(file, fileList) {
       fileList.forEach((item, idx) => {
@@ -325,6 +327,26 @@ 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",
+      });
+    },
   },
 };
 </script>