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
| <template>
| <div :class="[prefixCls, { fullscreen }]">
| <Upload
| name="file"
| multiple
| @change="handleChange"
| :action="uploadUrl"
| :showUploadList="false"
| accept=".jpg,.jpeg,.gif,.png,.webp"
| >
| <a-button type="primary" v-bind="{ ...getButtonProps }">
| {{ t('component.upload.imgUpload') }}
| </a-button>
| </Upload>
| </div>
| </template>
| <script lang="ts">
| import { defineComponent, computed } from 'vue';
|
| import { Upload } from 'ant-design-vue';
| import { useDesign } from '/@/hooks/web/useDesign';
| import { useGlobSetting } from '/@/hooks/setting';
| import { useI18n } from '/@/hooks/web/useI18n';
|
| export default defineComponent({
| name: 'TinymceImageUpload',
| components: { Upload },
| props: {
| fullscreen: {
| type: Boolean,
| },
| disabled: {
| type: Boolean,
| default: false,
| },
| },
| emits: ['uploading', 'done', 'error'],
| setup(props, { emit }) {
| let uploading = false;
|
| const { uploadUrl } = useGlobSetting();
| const { t } = useI18n();
| const { prefixCls } = useDesign('tinymce-img-upload');
|
| const getButtonProps = computed(() => {
| const { disabled } = props;
| return {
| disabled,
| };
| });
|
| function handleChange(info: Record<string, any>) {
| const file = info.file;
| const status = file?.status;
| const url = file?.response?.url;
| const name = file?.name;
|
| if (status === 'uploading') {
| if (!uploading) {
| emit('uploading', name);
| uploading = true;
| }
| } else if (status === 'done') {
| emit('done', name, url);
| uploading = false;
| } else if (status === 'error') {
| emit('error');
| uploading = false;
| }
| }
|
| return {
| prefixCls,
| handleChange,
| uploadUrl,
| t,
| getButtonProps,
| };
| },
| });
| </script>
| <style lang="less" scoped>
| @prefix-cls: ~'@{namespace}-tinymce-img-upload';
|
| .@{prefix-cls} {
| position: absolute;
| z-index: 20;
| top: 4px;
| right: 10px;
|
| &.fullscreen {
| position: fixed;
| z-index: 10000;
| }
| }
| </style>
|
|
