ImgFileUpload.vue
3.57 KB
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<template>
<div>
<el-upload
class="upload-demo"
:action="actionUrl"
:file-list="files"
:headers="header"
:on-success="success"
:on-error="error"
:on-preview="preview"
:multiple="true"
:before-remove="beforeRemove"
:accept="accept"
:before-upload="beforeAvatarUpload"
ref="fileUp"
:on-exceed="exceed"
:limit="1"
>
<el-tooltip placement="right" effect="light">
<div slot="content">
附件格式支持:{{ accept }} <br />附件大小限制:单个文件不超过50MB
</div>
<el-button size="mini" round icon="el-icon-plus">上传</el-button>
</el-tooltip>
</el-upload>
</div>
</template>
<script>
import {mapState} from 'vuex'
import req from '@/request.js'
import {Base64} from 'js-base64'
export default {
components: {},
props: ['fileJson'],
data() {
return {
src: '',
fileId: '',
fileTree: '',
iframeSrc: '',
files: [],
uploadingFiles: {},
list: [],
isChecking: true,
accept: '.jpg,.jpeg,.png,.JPG,.JPEG,.gif,.PNG,.GIF',
num: 0
}
},
watch: {
fileJson: {
handler: function(val, oldVal) {
if (val) {
this.files = JSON.parse(val)
} else {
this.files = []
}
}
}
},
computed: mapState({
header: state => {
return {Authorization: `Bearer ${state.login.currentUser.token}`}
},
actionUrl: function() {
return window.context.portal + '/system/file/v1/upload'
}
}),
mounted() {
if (this.$attrs.value) {
this.files = JSON.parse(this.$attrs.value)
}
},
methods: {
exceed(file, fileList) {
if (fileList.length == 1 || file.length > 1) {
this.$message.warning('只能上传一个文件')
}
},
preview(files) {
var id = files.id
},
beforeRemove(file, fileList) {
if (this.isChecking) {
return this.$confirm(`确定移除 ${file.name}?`).then(() => {
this.$emit('input', '')
})
}
},
error(response, file, fileList) {
delete this.uploadingFiles[Base64.encode(file.name)]
},
success(response, file, fileList) {
this.$emit(
'input',
JSON.stringify([{id: response.fileId, name: response.fileName}])
)
},
getFiles() {
if (this.files.length == 0) {
return ''
} else {
return this.files
}
},
isFinishUpload() {
if (JSON.stringify(this.uploadingFiles) != '{}') {
this.$message.warning('正在上传附件,请稍后!')
throw '正在上传附件,请稍后!'
}
},
beforeAvatarUpload(file) {
// 文件类型限制
const name = file.name ? file.name : ''
const ext = name
? name.substr(name.lastIndexOf('.') + 1, name.length)
: true
const isExt = this.accept.indexOf(ext) < 0
this.isChecking = !isExt
if (isExt) {
if (this.accept == 'false') {
this.$message.error('请配置可上传文件的格式!')
} else {
this.$message.error('上传的附件只能是 ' + this.accept + '格式!')
}
return !isExt
}
this.uploadingFiles[Base64.encode(name)] = 'eror'
}
}
}
</script>
<style lang="scss" scoped>
.upload-demo {
max-width: 570px;
margin-top: 5px;
}
/* element-ui el-upload框去除‘按 delete 键可删除’提示 */
/deep/.el-upload-list__item.is-success.focusing .el-icon-close-tip {
display: none !important;
}
/deep/.el-icon-close-tip {
display: none !important;
}
</style>