Upload add paste prop

梁灏
1 parent 24c10245
Showing 2 changed files with 19 additions and 167 deletions Show diff stats
examples/routers/upload.vue
src/components/upload/upload.vue
 <template>
-    <div>
-        <div class="demo-upload-list" v-for="item in uploadList">
-            <template v-if="item.status === 'finished'">
-                <img :src="item.url">
-                <div class="demo-upload-list-cover">
-                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
-                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
-                </div>
-            </template>
-            <template v-else>
-                <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
-            </template>
+    <Upload
+            multiple
+            type="drag"
+            paste
+            action="//jsonplaceholder.typicode.com/posts/">
+        <div style="padding: 20px 0">
+            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
+            <p>Click or drag files here to upload</p>
         </div>
-        <Upload
-                ref="upload"
-                :show-upload-list="false"
-                :default-file-list="defaultList"
-                :on-success="handleSuccess"
-                :format="['jpg','jpeg','png']"
-                :max-size="2048"
-                :on-format-error="handleFormatError"
-                :on-exceeded-size="handleMaxSize"
-                @on-progress="handleProgress"
-                :before-upload="handleBeforeUpload"
-                multiple
-                type="drag"
-                action="//jsonplaceholder.typicode.com/posts/"
-                style="display: inline-block;width:58px;">
-            <div style="width: 58px;height:58px;line-height: 58px;">
-                <Icon type="camera" size="20"></Icon>
-            </div>
-        </Upload>
-        {{ visible }}
-    </div>
+    </Upload>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                defaultList: [
-                    {
-                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
-                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
-                    },
-                    {
-                        'name': 'bc7521e033abdd1e92222d733590f104',
-                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
-                    }
-                ],
-                imgName: '',
-                visible: false,
-                uploadList: []
-            }
-        },
-        computed: {
-//            uploadList () {
-//                return this.$refs.upload ? this.$refs.upload.fileList : [];
-//            }
-        },
-        watch: {
-        },
-        mounted () {
-            this.uploadList = this.$refs.upload.fileList;
-//            console.log(this.$refs.upload.fileList)
-        },
-        methods: {
-            handleView (name) {
-                this.imgName = name;
-                this.visible = true;
-            },
-            handleRemove (file) {
-                // 从 upload 实例删除数据
-                const fileList = this.$refs.upload.fileList;
-                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
-            },
-            handleSuccess (res, file) {
-                // 因为上传过程为实例，这里模拟添加 url
-                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
-                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
-            },
-            handleFormatError (file) {
-                this.$Notice.warning({
-                    title: '文件格式不正确',
-                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
-                });
-            },
-            handleMaxSize (file) {
-                this.$Notice.warning({
-                    title: '超出文件大小限制',
-                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
-                });
-            },
-            handleBeforeUpload () {
-                const check = this.uploadList.length < 5;
-                if (!check) {
-                    this.$Notice.warning({
-                        title: '最多只能上传 5 张图片。'
-                    });
-                }
-                return check;
-            },
-            handleProgress (s) {
-                console.log(s)
-            }
-        }
     }
 </script>
-<style>
-    .demo-upload-list{
-        display: inline-block;
-        width: 60px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        overflow: hidden;
-        background: #fff;
-        position: relative;
-        box-shadow: 0 1px 1px rgba(0,0,0,.2);
-        margin-right: 4px;
-    }
-    .demo-upload-list img{
-        width: 100%;
-        height: 100%;
-    }
-    .demo-upload-list-cover{
-        display: none;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: rgba(0,0,0,.6);
-    }
-    .demo-upload-list:hover .demo-upload-list-cover{
-        display: block;
-    }
-    .demo-upload-list-cover i{
-        color: #fff;
-        font-size: 20px;
-        cursor: pointer;
-        margin: 0 2px;
-    }
-</style>
-
-
-<!--<template>-->
-    <!--<div>-->
-        <!--<Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">-->
-            <!--<i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>-->
-        <!--</Upload>-->
-        <!--<i-button @click.native="handleUpload">上传</i-button>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--file: null-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--handleBeforeUpload (file) {-->
-                <!--this.file = file;-->
-                <!--return false;-->
-            <!--},-->
-            <!--handleUpload () {-->
-                <!--this.$refs.file.post(this.file);-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
@@ -4,6 +4,7 @@
             :class="classes"
             @click="handleClick"
             @drop.prevent="onDrop"
+            @paste="handlePaste"
             @dragover.prevent="dragOver = true"
             @dragleave.prevent="dragOver = false">
             <input
@@ -132,6 +133,10 @@
                 default() {
                     return [];
                 }
+            },
+            paste: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -172,6 +177,11 @@
                 this.dragOver = false;
                 this.uploadFiles(e.dataTransfer.files);
             },
+            handlePaste (e) {
+                if (this.paste) {
+                    this.uploadFiles(e.clipboardData.files);
+                }
+            },
             uploadFiles (files) {
                 let postFiles = Array.prototype.slice.call(files);
                 if (!this.multiple) postFiles = postFiles.slice(0, 1);