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
| <template>
| <el-upload
| class="image-upload"
| list-type="picture-card"
| :file-list="fileList"
| action="#"
| :http-request="customUpload"
| :before-upload="beforeUpload"
| :on-remove="handleRemove"
| :on-preview="handlePreview"
| :multiple="true"
| >
| <el-icon>
| <Plus/>
| </el-icon>
| </el-upload>
| </template>
|
| <script>
| import {Plus} from '@element-plus/icons-vue'
| import {upload} from "@/api/basicData/common.js";
|
| export default {
| name: 'ImageUpload',
| emits: ['update:value'],
| components: {Plus},
| props: {
| value: {
| type: Array,
| default: () => []
| },
| type: {
| type: Number,
| required: true
| },
| bucketName: {
| type: String,
| default: ''
| }
| },
| data() {
| return {
| fileList: []
| }
| },
| watch: {
| /** 编辑回显 */
| value: {
| immediate: true,
| handler(val) {
| this.fileList = (val || []).map((item, index) => ({
| id: item.id,
| name: item.originalFilename || `image_${index}`,
| url: item.url,
| status: 'success',
| response: item
| }))
| }
| }
| },
| methods: {
| beforeUpload(file) {
| const isImage = file.type.startsWith('image/')
| if (!isImage) {
| this.$message.error('只能上传图片')
| }
| return isImage
| },
|
| customUpload({file, onSuccess, onError}) {
| const formData = new FormData()
| formData.append('file', file)
| formData.append('bucketName', this.bucketName === '' ? undefined : this.bucketName)
| formData.append('type', this.type)
|
| upload(formData).then(res => {
| this.fileList.push({
| id: res.data[0].id,
| name: res.data[0].originalFilename,
| url: res.data[0].url,
| status: 'success',
| response: res.data[0]
| })
| onSuccess(res.data)
| this.emitChange()
| }).catch(err => {
| onError(err)
| })
| },
|
| handleRemove(file, fileList) {
| this.fileList = fileList
| this.emitChange()
| },
|
| handlePreview(file) {
| window.open(file.url)
| },
|
| emitChange() {
| this.$emit('update:value', this.fileList.map(item => item.response)) // v-model
| }
| }
| }
| </script>
|
| <style scoped>
| .image-upload ::v-deep(.el-upload--picture-card) {
| width: 120px;
| height: 120px;
| }
| </style>
|
|
