Skip to content

Commit 9528b6f

Browse files
jevin98jevin98
committed
feat(upload): 支持directory(文件夹上传)参数
1 parent 322a544 commit 9528b6f

File tree

2 files changed

+119
-168
lines changed

2 files changed

+119
-168
lines changed

‎docs/src/document/zh-CN/components/upload.md

Lines changed: 102 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,15 @@
2020
</lay-upload>
2121
</template>
2222

23-
<script>
23+
<script setup>
2424
import { ref,reactive } from 'vue'
2525

26-
export default {
27-
  setup() {
26+
const data = ref();
2827

29-
const data = ref();
30-
31-
const doneHandle = (result) => {
32-
data.value = JSON.parse(result.data);
33-
console.log(data.value.url)
34-
};
35-
36-
    return {
37-
doneHandle,
38-
data,
39-
    }
40-
  }
41-
}
28+
const doneHandle = (result) => {
29+
data.value = JSON.parse(result.data);
30+
console.log(data.value.url)
31+
};
4232
</script>
4333

4434
:::
@@ -59,24 +49,14 @@ export default {
5949
</div>
6050
</template>
6151

62-
<script>
52+
<script setup>
6353
import { ref,reactive } from 'vue'
6454

65-
export default {
66-
  setup() {
67-
68-
const file1 = ref([]);
69-
const uploadRef = ref(null)
55+
const file1 = ref([]);
56+
const uploadRef = ref(null)
7057

71-
const handleUpload = () => {
72-
uploadRef.value.submit()
73-
}
74-
75-
    return {
76-
file1,
77-
handleUpload
78-
    }
79-
  }
58+
const handleUpload = () => {
59+
uploadRef.value.submit()
8060
}
8161
</script>
8262

@@ -100,41 +80,32 @@ export default {
10080
</lay-upload>
10181
</template>
10282

103-
<script>
83+
<script setup>
10484
import { ref,reactive } from 'vue'
10585

106-
export default {
107-
  setup() {
108-
const picList = ref([]);
109-
const filetoDataURL=(file,fn)=>{
110-
const reader = new FileReader();
111-
reader.onloadend = function(e){
112-
fn(e.target.result);
113-
};
114-
reader.readAsDataURL(file);
115-
};
116-
const getUploadFile=(files)=>{
117-
if(Array.isArray(files)&&files.length>0){
118-
files.forEach((file,index,array)=>{
119-
filetoDataURL(file,(res)=>{
120-
console.log(res);
121-
picList.value.push(res);
122-
console.log(picList.value);
123-
});
124-
});
125-
}
126-
};
127-
const beginChoose =(e)=>{
128-
console.log("beginChoose",e);
129-
};
130-
    return {
131-
getUploadFile,
132-
filetoDataURL,
133-
beginChoose,
134-
picList
135-
    }
136-
  }
137-
}
86+
const picList = ref([]);
87+
const filetoDataURL=(file,fn)=>{
88+
const reader = new FileReader();
89+
reader.onloadend = function(e){
90+
fn(e.target.result);
91+
};
92+
reader.readAsDataURL(file);
93+
};
94+
const getUploadFile=(files)=>{
95+
if(Array.isArray(files)&&files.length>0){
96+
files.forEach((file,index,array)=>{
97+
filetoDataURL(file,(res)=>{
98+
console.log(res);
99+
picList.value.push(res);
100+
console.log(picList.value);
101+
});
102+
});
103+
}
104+
};
105+
const beginChoose =(e)=>{
106+
console.log("beginChoose",e);
107+
};
108+
138109
</script>
139110

140111
:::
@@ -148,17 +119,6 @@ export default {
148119
  <lay-upload :multiple="true"></lay-upload>
149120
</template>
150121

151-
<script>
152-
import { ref } from 'vue'
153-
154-
export default {
155-
  setup() {
156-
    return {
157-
    }
158-
  }
159-
}
160-
</script>
161-
162122
:::
163123

164124
::: title 拖拽上传
@@ -170,16 +130,24 @@ export default {
170130
  <lay-upload :drag="true"></lay-upload>
171131
</template>
172132

173-
<script>
174-
import { ref } from 'vue'
133+
:::
134+
135+
::: title 文件夹上传
136+
:::
137+
138+
::: demo 使用 `directory` 开启文件夹上传
139+
140+
<template>
141+
  <lay-upload directory @onChange="handleChange"></lay-upload>
142+
</template>
175143

176-
export default {
177-
  setup() {
144+
<script setup>
178145

179-
    return {
180-
    }
181-
  }
146+
const handleChange = (file) => {
147+
console.log(file, "文件")
148+
console.log(file.length, "文件数量")
182149
}
150+
183151
</script>
184152

185153
:::
@@ -203,18 +171,12 @@ export default {
203171
</lay-upload>
204172
</template>
205173

206-
<script>
174+
<script setup>
207175
import { ref } from 'vue'
208-
export default {
209-
  setup() {
210-
const getUploadFile2 = (file)=>{
211-
console.log(file);
212-
};
213-
    return {
214-
getUploadFile2
215-
    }
216-
  }
217-
}
176+
177+
const getUploadFile2 = (file)=>{
178+
console.log(file);
179+
};
218180
</script>
219181

220182
:::
@@ -233,50 +195,39 @@ export default {
233195
</lay-upload>
234196
</template>
235197

236-
<script>
198+
<script setup>
237199
import { ref } from 'vue'
238-
export default {
239-
  setup() {
240-
const cutUrl = ref("");
241-
242-
const cutOptions = {
243-
copperOption: {
244-
center: false,
245-
aspectRatio: 1,
246-
crop: function(event) {
247-
console.log(event.detail.x);
248-
console.log(event.detail.y);
249-
console.log(event.detail.width);
250-
console.log(event.detail.height);
251-
console.log(event.detail.rotate);
252-
console.log(event.detail.scaleX);
253-
console.log(event.detail.scaleY);
254-
},
255-
}
256-
}
257-
258-
const getCutDone=(res)=>{
259-
console.log("getCutDone",res);
260-
cutUrl.value = res.msg;
261-
};
262-
263-
const getCutCancel=(res)=>{
264-
console.log("getCutCancel",res);
265-
};
266-
267-
const getFileDone=(res)=>{
268-
console.log("getFileDone",res);
269-
};
270-
271-
    return {
272-
getCutDone,
273-
getCutCancel,
274-
getFileDone,
275-
cutUrl,
276-
cutOptions
277-
    }
278-
  }
200+
201+
const cutUrl = ref("");
202+
203+
const cutOptions = {
204+
copperOption: {
205+
center: false,
206+
aspectRatio: 1,
207+
crop: function(event) {
208+
console.log(event.detail.x);
209+
console.log(event.detail.y);
210+
console.log(event.detail.width);
211+
console.log(event.detail.height);
212+
console.log(event.detail.rotate);
213+
console.log(event.detail.scaleX);
214+
console.log(event.detail.scaleY);
215+
},
216+
}
279217
}
218+
219+
const getCutDone=(res)=>{
220+
console.log("getCutDone",res);
221+
cutUrl.value = res.msg;
222+
};
223+
224+
const getCutCancel=(res)=>{
225+
console.log("getCutCancel",res);
226+
};
227+
228+
const getFileDone=(res)=>{
229+
console.log("getFileDone",res);
230+
};
280231
</script>
281232

282233
:::
@@ -293,35 +244,25 @@ export default {
293244
</lay-upload>
294245
</template>
295246

296-
<script>
247+
<script setup>
297248
import { ref,reactive } from 'vue'
298249
import { layer } from "@layui/layer-vue";
299250

300-
export default {
301-
  setup() {
302-
303-
const data10 = ref();
304-
305-
const doneHandle10 = (result) => {
306-
data.value = JSON.parse(result.data);
307-
};
308-
309-
const beforeUpload10 = (file) => {
310-
var isOver = false;
311-
if(file.size > 1000) {
312-
isOver = true;
313-
layer.msg(`file size over 1000 KB`, { icon: 2})
314-
}
315-
return new Promise((resolver) => resolver(true));
316-
}
317-
318-
    return {
319-
beforeUpload10,
320-
doneHandle10,
321-
data10,
322-
    }
323-
  }
251+
const data10 = ref();
252+
253+
const doneHandle10 = (result) => {
254+
data.value = JSON.parse(result.data);
255+
};
256+
257+
const beforeUpload10 = (file) => {
258+
var isOver = false;
259+
if(file.size > 1000) {
260+
isOver = true;
261+
layer.msg(`file size over 1000 KB`, { icon: 2})
262+
}
263+
return new Promise((resolver) => resolver(true));
324264
}
265+
325266
</script>
326267

327268
:::
@@ -345,6 +286,7 @@ export default {
345286
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持 ie8/9 | boolean | true | -- |
346287
| disabled | 设置文件禁用 | boolean | false | -- |
347288
| disabledPreview | 设置文件预览插槽区域为禁用状态 | boolean | false | -- |
289+
| directory `2.22.0` | 支持上传文件夹 | boolean | false | -- |
348290
| cut | 开启裁剪(`acceptMime`为image类型生效) | boolean | false | -- |
349291
| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object | { layerOption,copperOption } | -- |
350292
| text | 普通上传描述 | string | -- | -- |

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy