other / mew-iview

Commit 929d4915345bd6f34b408a324517d83b2061d65a

Authored by 梁灏
1 parent 24c10245

Upload add paste prop

Showing 2 changed files with 19 additions and 167 deletions   Show diff stats
Inline Side-by-side
examples/routers/upload.vue
  Show/Hide comments   View file @929d491
1 1 <template>
2   - <div>
3   - <div class="demo-upload-list" v-for="item in uploadList">
4   - <template v-if="item.status === 'finished'">
5   - <img :src="item.url">
6   - <div class="demo-upload-list-cover">
7   - <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
8   - <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
9   - </div>
10   - </template>
11   - <template v-else>
12   - <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
13   - </template>
  2 + <Upload
  3 + multiple
  4 + type="drag"
  5 + paste
  6 + action="//jsonplaceholder.typicode.com/posts/">
  7 + <div style="padding: 20px 0">
  8 + <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
  9 + <p>Click or drag files here to upload</p>
14 10 </div>
15   - <Upload
16   - ref="upload"
17   - :show-upload-list="false"
18   - :default-file-list="defaultList"
19   - :on-success="handleSuccess"
20   - :format="['jpg','jpeg','png']"
21   - :max-size="2048"
22   - :on-format-error="handleFormatError"
23   - :on-exceeded-size="handleMaxSize"
24   - @on-progress="handleProgress"
25   - :before-upload="handleBeforeUpload"
26   - multiple
27   - type="drag"
28   - action="//jsonplaceholder.typicode.com/posts/"
29   - style="display: inline-block;width:58px;">
30   - <div style="width: 58px;height:58px;line-height: 58px;">
31   - <Icon type="camera" size="20"></Icon>
32   - </div>
33   - </Upload>
34   - {{ visible }}
35   - </div>
  11 + </Upload>
36 12 </template>
37 13 <script>
38 14 export default {
39   - data () {
40   - return {
41   - defaultList: [
42   - {
43   - 'name': 'a42bdcc1178e62b4694c830f028db5c0',
44   - 'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
45   - },
46   - {
47   - 'name': 'bc7521e033abdd1e92222d733590f104',
48   - 'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
49   - }
50   - ],
51   - imgName: '',
52   - visible: false,
53   - uploadList: []
54   - }
55   - },
56   - computed: {
57   -// uploadList () {
58   -// return this.$refs.upload ? this.$refs.upload.fileList : [];
59   -// }
60   - },
61   - watch: {
62 15  
63   - },
64   - mounted () {
65   - this.uploadList = this.$refs.upload.fileList;
66   -// console.log(this.$refs.upload.fileList)
67   - },
68   - methods: {
69   - handleView (name) {
70   - this.imgName = name;
71   - this.visible = true;
72   - },
73   - handleRemove (file) {
74   - // 从 upload 实例删除数据
75   - const fileList = this.$refs.upload.fileList;
76   - this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
77   - },
78   - handleSuccess (res, file) {
79   - // 因为上传过程为实例，这里模拟添加 url
80   - file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
81   - file.name = '7eb99afb9d5f317c912f08b5212fd69a';
82   - },
83   - handleFormatError (file) {
84   - this.$Notice.warning({
85   - title: '文件格式不正确',
86   - desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
87   - });
88   - },
89   - handleMaxSize (file) {
90   - this.$Notice.warning({
91   - title: '超出文件大小限制',
92   - desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
93   - });
94   - },
95   - handleBeforeUpload () {
96   - const check = this.uploadList.length < 5;
97   - if (!check) {
98   - this.$Notice.warning({
99   - title: '最多只能上传 5 张图片。'
100   - });
101   - }
102   - return check;
103   - },
104   - handleProgress (s) {
105   - console.log(s)
106   - }
107   - }
108 16 }
109 17 </script>
110   -<style>
111   - .demo-upload-list{
112   - display: inline-block;
113   - width: 60px;
114   - height: 60px;
115   - text-align: center;
116   - line-height: 60px;
117   - border: 1px solid transparent;
118   - border-radius: 4px;
119   - overflow: hidden;
120   - background: #fff;
121   - position: relative;
122   - box-shadow: 0 1px 1px rgba(0,0,0,.2);
123   - margin-right: 4px;
124   - }
125   - .demo-upload-list img{
126   - width: 100%;
127   - height: 100%;
128   - }
129   - .demo-upload-list-cover{
130   - display: none;
131   - position: absolute;
132   - top: 0;
133   - bottom: 0;
134   - left: 0;
135   - right: 0;
136   - background: rgba(0,0,0,.6);
137   - }
138   - .demo-upload-list:hover .demo-upload-list-cover{
139   - display: block;
140   - }
141   - .demo-upload-list-cover i{
142   - color: #fff;
143   - font-size: 20px;
144   - cursor: pointer;
145   - margin: 0 2px;
146   - }
147   -</style>
148   -
149   -
150   -<!--<template>-->
151   - <!--<div>-->
152   - <!--<Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">-->
153   - <!--<i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>-->
154   - <!--</Upload>-->
155   - <!--<i-button @click.native="handleUpload">上传</i-button>-->
156   - <!--</div>-->
157   -<!--</template>-->
158   -<!--<script>-->
159   - <!--export default {-->
160   - <!--data () {-->
161   - <!--return {-->
162   - <!--file: null-->
163   - <!--}-->
164   - <!--},-->
165   - <!--methods: {-->
166   - <!--handleBeforeUpload (file) {-->
167   - <!--this.file = file;-->
168   - <!--return false;-->
169   - <!--},-->
170   - <!--handleUpload () {-->
171   - <!--this.$refs.file.post(this.file);-->
172   - <!--}-->
173   - <!--}-->
174   - <!--}-->
175   -<!--</script>-->
... ...
src/components/upload/upload.vue
  Show/Hide comments   View file @929d491
... ... @@ -4,6 +4,7 @@
4 4 :class="classes"
5 5 @click="handleClick"
6 6 @drop.prevent="onDrop"
  7 + @paste="handlePaste"
7 8 @dragover.prevent="dragOver = true"
8 9 @dragleave.prevent="dragOver = false">
9 10 <input
... ... @@ -132,6 +133,10 @@
132 133 default() {
133 134 return [];
134 135 }
  136 + },
  137 + paste: {
  138 + type: Boolean,
  139 + default: false
135 140 }
136 141 },
137 142 data () {
... ... @@ -172,6 +177,11 @@
172 177 this.dragOver = false;
173 178 this.uploadFiles(e.dataTransfer.files);
174 179 },
  180 + handlePaste (e) {
  181 + if (this.paste) {
  182 + this.uploadFiles(e.clipboardData.files);
  183 + }
  184 + },
175 185 uploadFiles (files) {
176 186 let postFiles = Array.prototype.slice.call(files);
177 187 if (!this.multiple) postFiles = postFiles.slice(0, 1);
... ...