Merge branch 'dev'

FEMessage · Jun 24, 2019 · c331e7f · c331e7f
2 parents 366c6b3 + 7e492ca
commit c331e7f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 20 deletions.
diff --git a/docs/before-upload.md b/docs/before-upload.md
@@ -0,0 +1,34 @@
+使用 beforeUpload 自定义上传前检查。比如检查图片的尺寸。
+Promise.reject()阻止上传，返回Promise.resolve()则可以上传
+
+```vue
+<template>
+  <upload-to-ali v-model="url" :before-upload="beforeUpload" />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  methods: {
+    beforeUpload(files) {
+      return Promise.all(
+        Array.from(files)
+          .filter(f => /image\/.*/.test(f.type))
+          .map(f => createImageBitmap(f))
+      )
+        .then(imgs => {
+          for (let i = 0; i < imgs.length; i++) {
+            if (imgs[i].width > 30) {
+              alert('图片过宽！' + imgs[i].width)
+              return Promise.reject()
+            }
+          }
+        })
+    }
+  }
+}
+</script>
+```
diff --git a/src/components/draggable-list.vue b/src/components/draggable-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition-group name="draggable-list">
+  <transition-group name="draggable-list" tag="div" class="draggable-list">
     <slot/>
   </transition-group>
 </template>
@@ -64,4 +64,7 @@ export default {
 
 .ghost
   opacity 0.5
+
+.draggable-list
+  display inline-block
 </style>
diff --git a/src/upload-to-ali.md b/src/upload-to-ali.md
diff --git a/src/upload-to-ali.vue b/src/upload-to-ali.vue
@@ -26,18 +26,22 @@
       <!--@slot 自定义上传区域，会覆盖 slot=spinner、slot=placeholder-->
       <slot>
         <div class="upload-box">
-          <!--@slot 自定义loading内容，默认类似 element-ui 的 v-loading -->
-          <slot name="spinner" v-if="uploading">
-            <div class="upload-loading">
-              <svg class="circular" viewBox="25 25 50 50">
-                <circle class="path" cx="50" cy="50" r="20" fill="none"></circle>
-              </svg>
-            </div>
-          </slot>
-          <!--@slot 自定义placeholder内容 -->
-          <slot name="placeholder" v-else>
-            <div class="upload-placeholder"></div>
-          </slot>
+          <template v-if="uploading">
+            <!--@slot 自定义loading内容，默认类似 element-ui 的 v-loading -->
+            <slot name="spinner">
+              <div class="upload-loading">
+                <svg class="circular" viewBox="25 25 50 50">
+                  <circle class="path" cx="50" cy="50" r="20" fill="none"></circle>
+                </svg>
+              </div>
+            </slot>
+          </template>
+          <template v-else>
+            <!--@slot 自定义placeholder内容 -->
+            <slot name="placeholder">
+              <div class="upload-placeholder"></div>
+            </slot>
+          </template>
         </div>
       </slot>
     </div>
@@ -221,6 +225,17 @@ export default {
       default(url) {
         this.previewUrl = url
       }
+    },
+    /**
+     * upload前的钩子函数，传入选择的文件，FileList类型。
+     * 要求返回一个promise，resolved则继续upload，rejected则停止上传。
+     * 调用时机在size和accept检验之前。
+     */
+    beforeUpload: {
+      type: Function,
+      default() {
+        return Promise.resolve()
+      }
     }
   },
   data() {
@@ -307,6 +322,12 @@ export default {
 
       if (!files.length) return
 
+      try {
+        await this.beforeUpload(files)
+      } catch (e) {
+        return
+      }
+
       if (files.some(i => i.size > this.size * oneKB)) {
         alert(`请选择${this.size}KB内的文件！`)
         return
@@ -588,6 +609,7 @@ $active-color = #5d81f9
   .upload-area {
     cursor: pointer;
     display: inline-block;
+    vertical-align: top;
   }
   .upload-tip {
     margin-top: 8px;