-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
Uploader.vue
99 lines (96 loc) · 2.01 KB
/
Uploader.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template>
<div id="app">
<uploader
v-model="fileList"
url="http://localhost:9090/upload"
name="upload"
title="自动上传"
:params="{
token: '13579',
linkid: '2323',
modelname: 'modelname'
}"
:headers="{
'custom-header': 'custom-info',
}"
:limit="6"
:limitPrompt="limit => `已经上传${limit}张图片嘞!`"
withCredentials
@before-upload="beforeUpload"
@after-upload="afterUpload"
@on-change="onChange"
@on-cancel="onCancel"
@on-success="onSuccess"
@on-error="onError"
@on-delete="onDelete"
/>
<uploader
title="手动上传"
:autoUpload="false"
v-model="fileList2"
/>
</div>
</template>
<script>
import Uploader from '../components/uploader'
export default {
name: 'app',
components: {
Uploader
},
data () {
return {
fileList: [
{
url: '../../assets/qr.png'
}
],
fileList2: []
}
},
mounted () {
},
methods: {
beforeUpload () {
console.log('before upload')
this.$vux.loading.show({
text: 'Loading'
})
},
afterUpload (action) {
setTimeout(() => {
this.$vux.loading.hide()
action && action()
}, 1000)
},
onChange (fileItem, fileList) {
console.log('on-change: ', fileItem, fileList)
},
onCancel () {
console.log('on-cancel: Sucess')
},
onSuccess (res, fileItem) {
console.log('on-success: ', res)
fileItem.fileid = res.data
},
onError (res) {
console.log('on-error: ', res)
},
onDelete (deleteItem, cb) {
console.log('on-delete: ', deleteItem)
cb && cb()
},
submit () {
const formData = new FormData()
const url = 'http://www.abc.com/upload/'
formData.append('file', this.fileList2[0].blob)
fetch
.post(url, formData)
.then(() => {})
.catch(() => {})
}
}
}
</script>
<style lang="less">
</style>