add upload-dragger

components.json

@@ -46,6 +46,7 @@
   "row": "./packages/row/index.js",
   "col": "./packages/col/index.js",
   "upload": "./packages/upload/index.js",
+  "upload-dragger": "./packages/upload/index.js",
   "progress": "./packages/progress/index.js",
   "spinner": "./packages/spinner/index.js",
   "message": "./packages/message/index.js",

examples/docs/zh-CN/upload.md

@@ -12,7 +12,15 @@
   export default {
     data() {
       return {
-        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+        fileList: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+          status: 'finished'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+          status: 'finished'
+        }]
       };
     },
     methods: {
@@ -78,7 +86,20 @@
 ```
 :::
 
-### 拖拽上传
+::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
+```html
+<el-upload-dragger
+  action="//jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :file-list="fileList">
+  <el-button size="small" type="primary">点击上传</el-button>
+  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+</el-upload-dragger>
+```
+:::
+
+<!-- ### 拖拽上传
 
 可将文件拖入指定区域进行上传。
 
@@ -154,7 +175,7 @@
   }
 </script>
 ```
-:::
+::: -->
 
 ### Attribute
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/upload-dragger/index.js

+import UploadDragger from '../upload/src/upload-dragger';
+
+/* istanbul ignore next */
+UploadDragger.install = function(Vue) {
+  Vue.component(UploadDragger.name, UploadDragger);
+};
+
+export default UploadDragger;

packages/upload/_index.js

+import Upload from './src';
+import UploadDragger from './src/upload-dragger';
+
+/* istanbul ignore next */
+Upload.install = function(Vue) {
+  Vue.component(Upload.name, Upload);
+  Vue.component(UploadDragger.name, UploadDragger);
+};
+
+export default { Upload, UploadDragger };

packages/upload/src/index.vue

@@ -34,6 +34,7 @@ export default {
       type: String,
       default: 'file'
     },
+    draggable: Boolean,
     withCredentials: Boolean,
     thumbnailMode: Boolean,
     showUploadList: {
@@ -80,7 +81,7 @@ export default {
 
   data() {
     return {
-      _fileList: [],
+      uploadFiles: [],
       dragOver: false,
       draging: false,
       tempIndex: 1
@@ -91,13 +92,16 @@ export default {
     fileList: {
       immediate: true,
       handler(fileList) {
-        this._fileList = fileList.map(item => {
-          item.status = 'finished';
-          item.percentage = 100;
-          item.uid = Date.now() + this.tempIndex++;
+        this.uploadFiles = fileList.map(item => {
+          if (!item.uid) {
+            item.uid = Date.now() + this.tempIndex++;
+          }
           return item;
         });
       }
+    },
+    uploadFiles(value, oldValue) {
+      // console.log(value, oldValue);
     }
   },
 
@@ -120,11 +124,11 @@ export default {
         return;
       }
 
-      this._fileList.push(_file);
+      this.uploadFiles.push(_file);
     },
     handleProgress(ev, file) {
       var _file = this.getFile(file);
-      this.onProgress(ev, _file, this._fileList);
+      this.onProgress(ev, _file, this.uploadFiles);
       _file.percentage = ev.percent || 0;
     },
     handleSuccess(res, file) {
@@ -134,7 +138,7 @@ export default {
         _file.status = 'finished';
         _file.response = res;
 
-        this.onSuccess(res, _file, this._fileList);
+        this.onSuccess(res, _file, this.uploadFiles);
 
         setTimeout(() => {
           _file.showProgress = false;
@@ -143,7 +147,7 @@ export default {
     },
     handleError(err, response, file) {
       var _file = this.getFile(file);
-      var fileList = this._fileList;
+      var fileList = this.uploadFiles;
 
       _file.status = 'fail';
 
@@ -152,12 +156,12 @@ export default {
       this.onError(err, response, file);
     },
     handleRemove(file) {
-      var fileList = this._fileList;
+      var fileList = this.uploadFiles;
       fileList.splice(fileList.indexOf(file), 1);
       this.onRemove(file, fileList);
     },
     getFile(file) {
-      var fileList = this._fileList;
+      var fileList = this.uploadFiles;
       var target;
       fileList.every(item => {
         target = file.uid === item.uid ? item : null;
@@ -171,17 +175,39 @@ export default {
       }
     },
     clearFiles() {
-      this._fileList = [];
+      this.uploadFiles = [];
+    },
+    initDraggable() {
+      const target = this.$el;
+      const _this = this;
+      target.addEventListener('dragover', event => {
+        event.preventDefault();
+        _this.draggable = true;
+      });
+      target.addEventListener('drop', event => {
+        event.preventDefault();
+        _this.draggable = false;
+      });
+      target.addEventListener('dragleave', event => {
+        event.preventDefault();
+        _this.draggable = false;
+      });
+    }
+  },
+
+  mounted() {
+    if (this.draggable) {
+      this.initDraggable();
     }
   },
 
   render(h) {
     var uploadList;
 
-    if (this.showUploadList && !this.thumbnailMode && this.fileList.length) {
+    if (this.showUploadList && !this.thumbnailMode && this.uploadFiles.length) {
       uploadList = (
         <UploadList
-          files={this.fileList}
+          files={this.uploadFiles}
           on-remove={this.handleRemove}
           on-preview={this.handlePreview}>
         </UploadList>
@@ -191,6 +217,7 @@ export default {
     var props = {
       props: {
         type: this.type,
+        draggable: this.draggable,
         action: this.action,
         multiple: this.multiple,
         'before-upload': this.beforeUpload,
@@ -213,25 +240,23 @@ export default {
         ? <upload {...props}>{this.$slots.default}</upload>
         : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
 
-    if (this.type === 'select') {
-      return (
-        <div class="el-upload">
-          {uploadList}
-          {uploadComponent}
-          {this.$slots.tip}
-        </div>
-      );
-    }
+    return (
+      <div class="el-upload">
+        {uploadList}
+        {uploadComponent}
+        {this.$slots.tip}
+      </div>
+    );
 
-    if (this.type === 'drag') {
-      return (
-        <div class="el-upload">
-          {uploadComponent}
-          {this.$slots.tip}
-          {uploadList}
-        </div>
-      );
-    }
+    // if (this.type === 'drag') {
+    //   return (
+    //     <div class="el-upload">
+    //       {uploadComponent}
+    //       {this.$slots.tip}
+    //       {uploadList}
+    //     </div>
+    //   );
+    // }
   }
 };
 </script>

packages/upload/src/upload-dragger.vue

+<script>
+  import index from '.';
+  import Upload from './upload';
+  import IframeUpload from './iframe-upload';
+  import UploadList from './upload-list';
+
+  export default {
+    name: 'ElUploadDragger',
+    extends: index,
+    components: {
+      UploadList,
+      Upload,
+      IframeUpload
+    },
+    props: {
+      draggable: {
+        type: Boolean,
+        default: true
+      }
+    },
+    render(h) {
+      var uploadList;
+
+      if (this.showUploadList && !this.thumbnailMode && this.uploadFiles.length) {
+        uploadList = (
+          <UploadList
+            files={this.uploadFiles}
+            on-remove={this.handleRemove}
+            on-preview={this.handlePreview}>
+          </UploadList>
+        );
+      }
+
+      var props = {
+        props: {
+          type: this.type,
+          draggable: this.draggable,
+          action: this.action,
+          multiple: this.multiple,
+          'before-upload': this.beforeUpload,
+          'with-credentials': this.withCredentials,
+          headers: this.headers,
+          name: this.name,
+          data: this.data,
+          accept: this.thumbnailMode ? 'image/gif, image/png, image/jpeg, image/bmp, image/webp' : this.accept,
+          'on-start': this.handleStart,
+          'on-progress': this.handleProgress,
+          'on-success': this.handleSuccess,
+          'on-error': this.handleError,
+          'on-preview': this.handlePreview,
+          'on-remove': this.handleRemove
+        },
+        ref: 'upload-inner'
+      };
+
+      var uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
+          ? <upload {...props}>{this.$slots.default}</upload>
+          : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
+
+      return (
+        <div
+          class={{
+            'el-upload-dragger': true,
+            'is-dragOver': this.dragOver
+          }}
+        >
+          {uploadComponent}
+          {this.$slots.tip}
+          {uploadList}
+        </div>
+      );
+    }
+  };
+</script>
\ No newline at end of file

packages/upload/src/upload.vue

@@ -6,9 +6,7 @@
       'is-showCover': showCover
     }"
     @click="handleClick"
-    @drop.prevent="onDrop"
-    @dragover.prevent="dragOver = true"
-    @dragleave.prevent="dragOver = false">
+  >
     <slot v-if="!showCover"></slot>
     <cover :image="lastestFile" :on-preview="onPreview" :on-remove="onRemove" v-else></cover>
     <input class="el-upload__input" type="file" ref="input" @change="handleChange" :multiple="multiple" :accept="accept">

src/index.js

@@ -47,6 +47,7 @@ import Icon from '../packages/icon';
 import Row from '../packages/row';
 import Col from '../packages/col';
 import Upload from '../packages/upload';
+import UploadDragger from '../packages/upload-dragger';
 import Progress from '../packages/progress';
 import Spinner from '../packages/spinner';
 import Message from '../packages/message';
@@ -201,6 +202,7 @@ module.exports = {
   Row,
   Col,
   Upload,
+  UploadDragger,
   Progress,
   Spinner,
   Message,