From 929d4915345bd6f34b408a324517d83b2061d65a Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 9 Jul 2018 18:15:17 +0800
Subject: [PATCH] Upload add paste prop
---
examples/routers/upload.vue | 176 +++++++++-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
src/components/upload/upload.vue | 10 ++++++++++
2 files changed, 19 insertions(+), 167 deletions(-)
diff --git a/examples/routers/upload.vue b/examples/routers/upload.vue
index 87bf378..3412083 100644
--- a/examples/routers/upload.vue
+++ b/examples/routers/upload.vue
@@ -1,175 +1,17 @@
<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>-->
diff --git a/src/components/upload/upload.vue b/src/components/upload/upload.vue
index e2af151..e44c8ec 100644
--- a/src/components/upload/upload.vue
+++ b/src/components/upload/upload.vue
@@ -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);
--
libgit2 0.21.4