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
-        :class="classes"
-        @click="handleClick"
-        @drop.prevent="onDrop"
-        @dragover.prevent="dragOver = true"
-        @dragleave.prevent="dragOver = false">
-        <input
-            v-el:input
-            :class="[prefixCls + '-input']"
-            type="file"
-            @change="handleChange"
-            :multiple="multiple"
-            :accept="accept">
-        <slot></slot>
+    <div :class="[prefixCls]">
+        <div
+            :class="classes"
+            @click="handleClick"
+            @drop.prevent="onDrop"
+            @dragover.prevent="dragOver = true"
+            @dragleave.prevent="dragOver = false">
+            <input
+                v-el:input
+                :class="[prefixCls + '-input']"
+                type="file"
+                @change="handleChange"
+                :multiple="multiple"
+                :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
                     }