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
<template>
<div><slot></slot></div>
</template>
<script>
// import '/static/webuploader.min'
import Cookie from 'js-cookie'
// http://git.gengmei.cc/backend/gm-upload/blob/master/gm_upload/consts.py
const UPLOAD_TYPE = '26'
export default {
props: {
uploadType: {
type: String,
default: UPLOAD_TYPE
},
size: {
type: Number,
default: 1 * 1024 * 1024
}
},
mounted () {
let uploader = WebUploader.create({
pick: {
multiple: false,
id: this.$el
},
swf: '/static/Uploader.swf',
server: '/api/file/upload',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'
},
auto: true,
fileSizeLimit: this.size,
formData: {
'uploadType': this.uploadType,
'csrfmiddlewaretoken': Cookie.get('csrftoken') || ''
}
})
uploader.on('uploadSuccess', (file, res) => {
uploader.reset()
if (res.error === 0) {
this.$emit('upload-img', res)
this.$emit('uploaded', res.data, file)
} else {
this.$emit('error', {type: 'SERVER_ERROR', reason: res.message})
}
})
uploader.on('error', (type) => {
if (type === 'Q_EXCEED_SIZE_LIMIT') {
this.$emit('error', {type: 'EXCEED_SIZE_LIMIT', reason: '图片过大'})
}
})
uploader.on('uploadError', (file, reason) => {
this.$emit('error', {type: 'UP_ERROR', reason})
})
}
}
</script>