update Upload

update Upload

src/components/upload/upload-list.vue

@@ -1,13 +1,93 @@
 <template>
-
+    <ul :class="[prefixCls + '-list']">
+        <li
+            v-for="file in files"
+            :class="fileCls(file)"
+            @click="handleClick(file)">
+            <span @click="handlePreview(file)">
+                <Icon :type="format(file)"></Icon> {{ file.name }}
+            </span>
+            <Icon
+                type="ios-close-empty"
+                :class="[prefixCls + '-list-remove']"
+                v-show="file.status === 'finished'"
+                @click="handleRemove(file)"></Icon>
+            <Progress
+                v-if="file.showProgress"
+                :stroke-width="2"
+                :percent="parsePercentage(file.percentage)"
+                :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"
+                transition="fade"></Progress>
+        </li>
+    </ul>
 </template>
 <script>
+    import Icon from '../icon/icon.vue';
+    import Progress from '../progress/progress.vue';
+    const prefixCls = 'ivu-upload';
+
     export default {
-        props: {},
+        components: { Icon, Progress },
+        props: {
+            files: {
+                type: Array,
+                default() {
+                    return [];
+                }
+            }
+        },
         data () {
-            return {};
+            return {
+                prefixCls: prefixCls
+            };
         },
         computed: {},
-        methods: {}
+        methods: {
+            fileCls (file) {
+                return [
+                    `${prefixCls}-list-file`,
+                    {
+                        [`${prefixCls}-list-file-finish`]: file.status === 'finished'
+                    }
+                ];
+            },
+            handleClick (file) {
+                this.$emit('on-file-click', file);
+            },
+            handlePreview (file) {
+                this.$emit('on-file-preview', file);
+            },
+            handleRemove (file) {
+                this.$emit('on-file-remove', file);
+            },
+            format (file) {
+                const format = file.name.split('.').pop().toLocaleLowerCase() || '';
+                let type = 'document';
+
+                if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
+                    type = 'image';
+                }
+                if (['mp4','m3u8','rmvb','avi','swf','3gp','mkv','flv'].indexOf(format) > -1) {
+                    type = 'ios-film';
+                }
+                if (['mp3','wav','wma','ogg','aac','flac'].indexOf(format) > -1) {
+                    type = 'ios-musical-notes';
+                }
+                if (['doc','txt','docx','pages','epub','pdf'].indexOf(format) > -1) {
+                    type = 'document-text';
+                }
+                if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
+                    type = 'stats-bars';
+                }
+                if (['keynote','ppt','pptx'].indexOf(format) > -1) {
+                    type = 'ios-videocam';
+                }
+
+                return type;
+            },
+            parsePercentage (val) {
+                return parseInt(val, 10);
+            }
+        }
     };
 </script>

src/components/upload/upload.vue

@@ -1,27 +1,37 @@
 <template>
-    <div
+    <div :class="[prefixCls]">
-        :class="classes"
+        <div
-        @click="handleClick"
+            :class="classes"
-        @drop.prevent="onDrop"
+            @click="handleClick"
-        @dragover.prevent="dragOver = true"
+            @drop.prevent="onDrop"
-        @dragleave.prevent="dragOver = false">
+            @dragover.prevent="dragOver = true"
-        <input
+            @dragleave.prevent="dragOver = false">
-            v-el:input
+            <input
-            :class="[prefixCls + '-input']"
+                v-el:input
-            type="file"
+                :class="[prefixCls + '-input']"
-            @change="handleChange"
+                type="file"
-            :multiple="multiple"
+                @change="handleChange"
-            :accept="accept">
+                :multiple="multiple"
-        <slot></slot>
+                :accept="accept">
+            <slot></slot>
+        </div>
+        <slot name="tip"></slot>
+        <upload-list
+            v-if="showUploadList"
+            :files="fileList"
+            @on-file-remove="handleRemove"
+            @on-file-preview="handlePreview"></upload-list>
     </div>
 </template>
 <script>
+    import UploadList from './upload-list.vue';
     import ajax from './ajax';
     import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-upload';
 
     export default {
+        components: { UploadList },
         props: {
             action: {
                 type: String,
@@ -56,7 +66,8 @@
                 type: String,
                 validator (value) {
                     return oneOf(value, ['select', 'drag']);
-                }
+                },
+                default: 'select'
             },
             format: {
                 type: Array,
@@ -133,6 +144,7 @@
                 return [
                     `${prefixCls}`,
                     {
+                        [`${prefixCls}-select`]: this.type === 'select',
                         [`${prefixCls}-drag`]: this.type === 'drag',
                         [`${prefixCls}-dragOver`]: this.dragOver
                     }

src/styles/components/upload.less

@@ -1,5 +1,75 @@
 @upload-prefix-cls: ~"@{css-prefix}upload";
 
 .@{upload-prefix-cls} {
+    input[type="file"]{
+        display: none;
+    }
 
+    &-list{
+        margin-bottom: 8px;
+
+        &-file{
+            padding: 4px;
+            color: @text-color;
+            border-radius: @border-radius-small;
+            transition: background-color @transition-time @ease-in-out;
+            overflow: hidden;
+            position: relative;
+
+            & + span{
+                cursor: pointer;
+                transition: color @transition-time @ease-in-out;
+                i{
+                    display: inline-block;
+                    width: @font-size-small;
+                    height: @font-size-small;
+                    color: @text-color;
+                    text-align: center;
+                }
+            }
+
+            &:hover{
+                background: @input-disabled-bg;
+                & + span{
+                    color: @primary-color;
+                    i{
+                        color: @text-color;
+                    }
+                }
+                .@{upload-prefix-cls}-list-remove{
+                    opacity: 1;
+                }
+            }
+        }
+        &-remove{
+            opacity: 0;
+            font-size: 18px;
+            cursor: pointer;
+            float: right;
+            margin-right: 4px;
+            color: @legend-color;
+            transition: all @transition-time ease;
+            &:hover{
+                color: #444;
+            }
+        }
+    }
+
+    &-drag{
+        background: #fff;
+        border: 1px dashed @border-color-base;
+        border-radius: @border-radius-small;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        transition: border-color @transition-time ease;
+
+        &:hover{
+            border: 1px dashed @primary-color;
+        }
+    }
+    &-dragOver{
+        border: 2px dashed @primary-color;
+    }
 }

test/routers/upload.vue

@@ -1,13 +1,54 @@
 <template>
-    <Upload action="/qiniu" :max-size="10000">
+    <div style="margin: 50px;width: 300px;">
-        <i-button>上传</i-button>
+        <Upload
-    </Upload>
+            action="//jsonplaceholder.typicode.com/posts/"
+            multiple
+            type="drag"
+            :max-size="10000"
+            :default-file-list="defaultFileList">
+            <div style="padding: 40px 100px">
+                <i-button>上传</i-button>
+            </div>
+            <!--<div slot="tip">只能上传 jpg/png 格式的文件</div>-->
+        </Upload>
+    </div>
 </template>
 <script>
     export default {
         props: {},
         data () {
-            return {};
+            return {
+                defaultFileList: [
+                    {
+                        'name': 'Vue.js权威指南.zip',
+                        'url': 'http://www.baidu.com'
+                    },
+                    {
+                        'name': 'Vue.js权威指南.doc',
+                        'url': 'http://www.baidu.com'
+                    },
+                    {
+                        'name': '套马的汉子.mp3',
+                        'url': 'http://www.baidu.com'
+                    },
+                    {
+                        'name': '风景.jpg',
+                        'url': 'http://www.baidu.com'
+                    },
+                    {
+                        'name': 'Vue.js权威指南.mp4',
+                        'url': 'http://www.baidu.com'
+                    },
+                    {
+                        'name': '套马的汉子.csv',
+                        'url': 'http://www.baidu.com'
+                    },
+                    {
+                        'name': '风景.ppt',
+                        'url': 'http://www.baidu.com'
+                    },
+                ]
+            };
         },
         computed: {},
         methods: {}