简柏林 / thingskit-front · Commits

Commit 4d64538776859eba2c3f397ea524241b05989ede

Authored by fengwotao
1 parent 8b700968

pref:优化企业定制关于上传图片的重复代码

Inline Side-by-side
Showing 6 changed files with 142 additions and 241 deletions
@@ -6,52 +6,21 @@ @@ -6,52 +6,21 @@
6 <template #logoUpload> 6 <template #logoUpload>
7 <ContentUploadText> 7 <ContentUploadText>
8 <template #uploadImg> 8 <template #uploadImg>
9 - <Upload  
10 - name="avatar"  
11 - list-type="picture-card"  
12 - class="avatar-uploader"  
13 - :show-upload-list="false"  
14 - @preview="handlePreview"  
15 - :customRequest="customUploadLogoPic"  
16 - :before-upload="beforeUploadLogoPic"  
17 - >  
18 - <img v-if="logoPic" class="fill-img" :src="logoPic" alt="avatar" />  
19 - <div v-else>  
20 - <Spin v-if="loading" tip="正在上传中..." />  
21 - <PlusOutlined v-else />  
22 - <div class="ant-upload-text">上传</div>  
23 - </div>  
24 - </Upload> 9 + <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
25 </template> 10 </template>
26 <template #uploadText> 11 <template #uploadText>
27 - <div class="box-outline">  
28 - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB  
29 - </div> 12 + <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M </div>
30 </template> 13 </template>
31 </ContentUploadText> 14 </ContentUploadText>
32 </template> 15 </template>
33 <template #bgUpload> 16 <template #bgUpload>
34 <ContentUploadText> 17 <ContentUploadText>
35 <template #uploadImg> 18 <template #uploadImg>
36 - <Upload  
37 - name="avatar"  
38 - list-type="picture-card"  
39 - class="avatar-uploader"  
40 - :show-upload-list="false"  
41 - :customRequest="customUploadBgPic"  
42 - :before-upload="beforeUploadBgPic"  
43 - >  
44 - <img v-if="bgPic" class="fill-img" :src="bgPic" alt="avatar" />  
45 - <div v-else>  
46 - <Spin v-if="loading1" tip="正在上传中..." />  
47 - <PlusOutlined v-else />  
48 - <div class="ant-upload-text">上传</div>  
49 - </div>  
50 - </Upload> 19 + <CustomUploadComp :imgUrl="bgPic" @setImg="handleSetBgImgUrl" />
51 </template> 20 </template>
52 <template #uploadText> 21 <template #uploadText>
53 <div class="box-outline"> 22 <div class="box-outline">
54 - 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M 23 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过5M
55 </div> 24 </div>
56 </template> 25 </template>
57 </ContentUploadText> 26 </ContentUploadText>
@@ -83,7 +52,7 @@ @@ -83,7 +52,7 @@
83 </template> 52 </template>
84 <template #uploadText> 53 <template #uploadText>
85 <div class="box-outline"> 54 <div class="box-outline">
86 - 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M 55 + 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过5M
87 </div> 56 </div>
88 </template> 57 </template>
89 </ContentUploadText> 58 </ContentUploadText>
@@ -108,15 +77,16 @@ @@ -108,15 +77,16 @@
108 import { defineComponent, ref, unref, onMounted } from 'vue'; 77 import { defineComponent, ref, unref, onMounted } from 'vue';
109 import { BasicForm, useForm } from '/@/components/Form/index'; 78 import { BasicForm, useForm } from '/@/components/Form/index';
110 import { Loading } from '/@/components/Loading/index'; 79 import { Loading } from '/@/components/Loading/index';
111 - import { Card, Upload, Input, Modal, Spin } from 'ant-design-vue'; 80 + import { Card, Upload, Input, Modal } from 'ant-design-vue';
112 import { PlusOutlined } from '@ant-design/icons-vue'; 81 import { PlusOutlined } from '@ant-design/icons-vue';
113 import { schemas } from '../config/AppDraw.config'; 82 import { schemas } from '../config/AppDraw.config';
114 import { FileItem, FileInfo } from '../types/index'; 83 import { FileItem, FileInfo } from '../types/index';
115 - import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index'; 84 + import { bgUpload, resetAppInfo } from '/@/api/oem/index';
116 import { useMessage } from '/@/hooks/web/useMessage'; 85 import { useMessage } from '/@/hooks/web/useMessage';
117 import { getAppDesign, updateAppDesign } from '/@/api/oem/index'; 86 import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
118 import { Authority } from '/@/components/Authority'; 87 import { Authority } from '/@/components/Authority';
119 import ContentUploadText from './ContentUploadText.vue'; 88 import ContentUploadText from './ContentUploadText.vue';
  89 + import { CustomUploadComp } from './customUplaod/index';
120 90
121 export default defineComponent({ 91 export default defineComponent({
122 components: { 92 components: {
@@ -129,7 +99,7 @@ @@ -129,7 +99,7 @@
129 Modal, 99 Modal,
130 Authority, 100 Authority,
131 ContentUploadText, 101 ContentUploadText,
132 - Spin, 102 + CustomUploadComp,
133 }, 103 },
134 setup() { 104 setup() {
135 const loading = ref(false); 105 const loading = ref(false);
@@ -170,59 +140,20 @@ @@ -170,59 +140,20 @@
170 previewVisible.value = true; 140 previewVisible.value = true;
171 }; 141 };
172 142
  143 + const handleSetBgImgUrl = (d) => {
  144 + bgPic.value = d;
  145 + };
  146 +
  147 + const handleSetLogoImgUrl = (d) => {
  148 + logoPic.value = d;
  149 + };
  150 +
173 // logo图片上传 151 // logo图片上传
174 const logoPic = ref(); 152 const logoPic = ref();
175 - async function customUploadLogoPic({ file }) {  
176 - if (beforeUploadLogoPic(file)) {  
177 - logoPic.value = '';  
178 - loading.value = true;  
179 - const formData = new FormData();  
180 - formData.append('file', file);  
181 - const response = await logoUpload(formData);  
182 - if (response.fileStaticUri) {  
183 - logoPic.value = response.fileStaticUri;  
184 - loading.value = false;  
185 - }  
186 - }  
187 - }  
188 - const beforeUploadLogoPic = (file) => {  
189 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
190 - if (!isJpgOrPng) {  
191 - createMessage.error('只能上传图片文件!');  
192 - }  
193 - const isLt2M = (file.size as number) / 1024 < 500;  
194 - if (!isLt2M) {  
195 - createMessage.error('图片大小不能超过500KB!');  
196 - }  
197 - return isJpgOrPng && isLt2M;  
198 - };  
199 153
200 // 登录页背景上传 154 // 登录页背景上传
201 const bgPic = ref(); 155 const bgPic = ref();
202 - async function customUploadBgPic({ file }) {  
203 - if (beforeUploadBgPic(file)) {  
204 - bgPic.value = '';  
205 - loading1.value = true;  
206 - const formData = new FormData();  
207 - formData.append('file', file);  
208 - const response = await bgUpload(formData);  
209 - if (response.fileStaticUri) {  
210 - bgPic.value = response.fileStaticUri;  
211 - loading1.value = false;  
212 - }  
213 - }  
214 - }  
215 - const beforeUploadBgPic = (file) => {  
216 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
217 - if (!isJpgOrPng) {  
218 - createMessage.error('只能上传图片文件!');  
219 - }  
220 - const isLt2M = (file.size as number) / 1024 / 1024 < 2;  
221 - if (!isLt2M) {  
222 - createMessage.error('图片大小不能超过2MB!');  
223 - }  
224 - return isJpgOrPng && isLt2M;  
225 - }; 156 +
226 // 首页轮播图 157 // 首页轮播图
227 const fileList = ref<FileItem[]>([]); 158 const fileList = ref<FileItem[]>([]);
228 async function customUploadHomeSwiper({ file }) { 159 async function customUploadHomeSwiper({ file }) {
@@ -337,10 +268,6 @@ @@ -337,10 +268,6 @@
337 handleUpdateInfo, 268 handleUpdateInfo,
338 handleCancel, 269 handleCancel,
339 handlePreview, 270 handlePreview,
340 - customUploadLogoPic,  
341 - beforeUploadLogoPic,  
342 - customUploadBgPic,  
343 - beforeUploadBgPic,  
344 customUploadHomeSwiper, 271 customUploadHomeSwiper,
345 beforeUploadHomeSwiper, 272 beforeUploadHomeSwiper,
346 handleChange, 273 handleChange,
@@ -351,6 +278,8 @@ @@ -351,6 +278,8 @@
351 loading, 278 loading,
352 loading1, 279 loading1,
353 handleResetInfo, 280 handleResetInfo,
  281 + handleSetBgImgUrl,
  282 + handleSetLogoImgUrl,
354 }; 283 };
355 }, 284 },
356 }); 285 });
@@ -371,9 +300,4 @@ @@ -371,9 +300,4 @@
371 border: 1px dashed #d9d9d9; 300 border: 1px dashed #d9d9d9;
372 text-align: left; 301 text-align: left;
373 } 302 }
374 -  
375 - .fill-img {  
376 - width: 100%;  
377 - height: 100%;  
378 - }  
379 </style> 303 </style>
@@ -6,26 +6,10 @@ @@ -6,26 +6,10 @@
6 <template #logoUpload> 6 <template #logoUpload>
7 <ContentUploadText> 7 <ContentUploadText>
8 <template #uploadImg> 8 <template #uploadImg>
9 - <Upload  
10 - name="avatar"  
11 - list-type="picture-card"  
12 - class="avatar-uploader"  
13 - :show-upload-list="false"  
14 - :customRequest="customUploadLogoPic"  
15 - :before-upload="beforeUploadLogoPic"  
16 - >  
17 - <img class="fill-img" v-if="logoPic" :src="logoPic" alt="avatar" />  
18 - <div v-else>  
19 - <Spin v-if="loading" tip="正在上传中..." />  
20 - <PlusOutlined v-else />  
21 - <div class="ant-upload-text">上传</div>  
22 - </div>  
23 - </Upload> 9 + <CustomUploadComp :imgUrl="logoPic" @setImg="handleSetLogoImgUrl" />
24 </template> 10 </template>
25 <template #uploadText> 11 <template #uploadText>
26 - <div class="box-outline">  
27 - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB  
28 - </div> 12 + <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过5M </div>
29 </template> 13 </template>
30 </ContentUploadText> 14 </ContentUploadText>
31 </template> 15 </template>
@@ -61,23 +45,7 @@ @@ -61,23 +45,7 @@
61 <template #bgUpload> 45 <template #bgUpload>
62 <ContentUploadText> 46 <ContentUploadText>
63 <template #uploadImg> 47 <template #uploadImg>
64 - <Upload  
65 - name="avatar"  
66 - list-type="picture-card"  
67 - class="avatar-uploader"  
68 - :show-upload-list="false"  
69 - :customRequest="customUploadBgPic"  
70 - :before-upload="beforeUploadBgPic"  
71 - >  
72 - <img class="fill-img" v-if="bgPic" :src="bgPic" alt="avatar" />  
73 - <div v-else>  
74 - <div>  
75 - <Spin v-if="loading2" tip="正在上传中..." />  
76 - <PlusOutlined v-else />  
77 - <div class="ant-upload-text">上传</div>  
78 - </div>  
79 - </div></Upload  
80 - > 48 + <CustomUploadComp :imgUrl="bgPic" @setImg="handleSetBgImgUrl" />
81 </template> 49 </template>
82 <template #uploadText> 50 <template #uploadText>
83 <div class="box-outline"> 51 <div class="box-outline">
@@ -112,19 +80,13 @@ @@ -112,19 +80,13 @@
112 import { Loading } from '/@/components/Loading/index'; 80 import { Loading } from '/@/components/Loading/index';
113 import { useMessage } from '/@/hooks/web/useMessage'; 81 import { useMessage } from '/@/hooks/web/useMessage';
114 import type { FileItem } from '/@/components/Upload/src/typing'; 82 import type { FileItem } from '/@/components/Upload/src/typing';
115 - import {  
116 - logoUpload,  
117 - iconUpload,  
118 - bgUpload,  
119 - getPlatForm,  
120 - updatePlatForm,  
121 - resetPlateInfo,  
122 - } from '/@/api/oem/index'; 83 + import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
123 import { PlusOutlined } from '@ant-design/icons-vue'; 84 import { PlusOutlined } from '@ant-design/icons-vue';
124 import { useUserStore } from '/@/store/modules/user'; 85 import { useUserStore } from '/@/store/modules/user';
125 import { createLocalStorage } from '/@/utils/cache/index'; 86 import { createLocalStorage } from '/@/utils/cache/index';
126 import { Authority } from '/@/components/Authority'; 87 import { Authority } from '/@/components/Authority';
127 import ContentUploadText from './ContentUploadText.vue'; 88 import ContentUploadText from './ContentUploadText.vue';
  89 + import { CustomUploadComp } from './customUplaod/index';
128 90
129 export default defineComponent({ 91 export default defineComponent({
130 components: { 92 components: {
@@ -137,6 +99,7 @@ @@ -137,6 +99,7 @@
137 Authority, 99 Authority,
138 ContentUploadText, 100 ContentUploadText,
139 Spin, 101 Spin,
  102 + CustomUploadComp,
140 }, 103 },
141 setup() { 104 setup() {
142 const loading = ref(false); 105 const loading = ref(false);
@@ -163,30 +126,13 @@ @@ -163,30 +126,13 @@
163 const logoPic = ref(); 126 const logoPic = ref();
164 const iconPic = ref(); 127 const iconPic = ref();
165 const bgPic = ref(); 128 const bgPic = ref();
166 - // logo图片上传  
167 - async function customUploadLogoPic({ file }) {  
168 - if (beforeUploadLogoPic(file)) {  
169 - logoPic.value = '';  
170 - loading.value = true;  
171 - const formData = new FormData();  
172 - formData.append('file', file);  
173 - const response = await logoUpload(formData);  
174 - if (response.fileStaticUri) {  
175 - logoPic.value = response.fileStaticUri;  
176 - loading.value = false;  
177 - }  
178 - }  
179 - }  
180 - const beforeUploadLogoPic = (file: FileItem) => {  
181 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
182 - if (!isJpgOrPng) {  
183 - createMessage.error('只能上传图片文件!');  
184 - }  
185 - const isLt2M = (file.size as number) / 1024 < 500;  
186 - if (!isLt2M) {  
187 - createMessage.error('图片大小不能超过500KB!');  
188 - }  
189 - return isJpgOrPng && isLt2M; 129 +
  130 + const handleSetBgImgUrl = (d) => {
  131 + bgPic.value = d;
  132 + };
  133 +
  134 + const handleSetLogoImgUrl = (d) => {
  135 + logoPic.value = d;
190 }; 136 };
191 // Icon上传 137 // Icon上传
192 async function customUploadIconPic({ file }) { 138 async function customUploadIconPic({ file }) {
@@ -213,32 +159,6 @@ @@ -213,32 +159,6 @@
213 } 159 }
214 return isJpgOrPng && isLt2M; 160 return isJpgOrPng && isLt2M;
215 }; 161 };
216 - // 登录页背景上传  
217 - async function customUploadBgPic({ file }) {  
218 - if (beforeUploadBgPic(file)) {  
219 - bgPic.value = '';  
220 - loading2.value = true;  
221 - const formData = new FormData();  
222 - formData.append('file', file);  
223 - const response = await bgUpload(formData);  
224 - if (response.fileStaticUri) {  
225 - bgPic.value = response.fileStaticUri;  
226 - loading2.value = false;  
227 - }  
228 - }  
229 - }  
230 - const beforeUploadBgPic = (file: FileItem) => {  
231 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
232 - if (!isJpgOrPng) {  
233 - createMessage.error('只能上传图片文件!');  
234 - }  
235 - const isLt2M = (file.size as number) / 1024 / 1024 < 5;  
236 - if (!isLt2M) {  
237 - createMessage.error('图片大小不能超过5MB!');  
238 - }  
239 - return isJpgOrPng && isLt2M;  
240 - };  
241 -  
242 // 更新 162 // 更新
243 const handleUpdateInfo = async () => { 163 const handleUpdateInfo = async () => {
244 try { 164 try {
@@ -296,18 +216,16 @@ @@ -296,18 +216,16 @@
296 logoPic, 216 logoPic,
297 iconPic, 217 iconPic,
298 bgPic, 218 bgPic,
299 - customUploadLogoPic,  
300 - beforeUploadLogoPic,  
301 customUploadIconPic, 219 customUploadIconPic,
302 beforeUploadIconPic, 220 beforeUploadIconPic,
303 - customUploadBgPic,  
304 - beforeUploadBgPic,  
305 compState, 221 compState,
306 handleUpdateInfo, 222 handleUpdateInfo,
307 loading, 223 loading,
308 loading1, 224 loading1,
309 loading2, 225 loading2,
310 handleResetInfo, 226 handleResetInfo,
  227 + handleSetBgImgUrl,
  228 + handleSetLogoImgUrl,
311 }; 229 };
312 }, 230 },
313 }); 231 });
@@ -5,21 +5,7 @@ @@ -5,21 +5,7 @@
5 <template #qrcode> 5 <template #qrcode>
6 <ContentUploadText> 6 <ContentUploadText>
7 <template #uploadImg> 7 <template #uploadImg>
8 - <Upload  
9 - name="avatar"  
10 - list-type="picture-card"  
11 - class="avatar-uploader"  
12 - :show-upload-list="false"  
13 - :customRequest="customUploadqrcodePic"  
14 - :before-upload="beforeUploadqrcodePic"  
15 - >  
16 - <img class="fill-img" v-if="qrcodePic" :src="qrcodePic" alt="avatar" />  
17 - <div v-else>  
18 - <Spin v-if="loading" tip="正在上传中..." />  
19 - <PlusOutlined v-else />  
20 - <div class="ant-upload-text">上传</div>  
21 - </div></Upload  
22 - > 8 + <CustomUploadComp :imgUrl="qrcodePic" @setImg="handleSetCodeImgUrl" />
23 </template> 9 </template>
24 <template #uploadText> 10 <template #uploadText>
25 <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div> 11 <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
@@ -46,7 +32,7 @@ @@ -46,7 +32,7 @@
46 32
47 <script lang="ts"> 33 <script lang="ts">
48 import { defineComponent, onMounted, ref, computed } from 'vue'; 34 import { defineComponent, onMounted, ref, computed } from 'vue';
49 - import { Card, Upload, Spin } from 'ant-design-vue'; 35 + import { Card } from 'ant-design-vue';
50 import { BasicForm, useForm } from '/@/components/Form/index'; 36 import { BasicForm, useForm } from '/@/components/Form/index';
51 import { schemas, provSchemas } from '../config/enterPriseInfo.config'; 37 import { schemas, provSchemas } from '../config/enterPriseInfo.config';
52 import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index'; 38 import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
@@ -54,25 +40,21 @@ @@ -54,25 +40,21 @@
54 import { useMessage } from '/@/hooks/web/useMessage'; 40 import { useMessage } from '/@/hooks/web/useMessage';
55 import { useUserStore } from '/@/store/modules/user'; 41 import { useUserStore } from '/@/store/modules/user';
56 import { createLocalStorage } from '/@/utils/cache'; 42 import { createLocalStorage } from '/@/utils/cache';
57 - import { PlusOutlined } from '@ant-design/icons-vue';  
58 - import { qrcodeUpload } from '/@/api/oem/index';  
59 - import type { FileItem } from '/@/components/Upload/src/typing';  
60 import type { CityItem, Code } from '../types'; 43 import type { CityItem, Code } from '../types';
61 import { Authority } from '/@/components/Authority'; 44 import { Authority } from '/@/components/Authority';
62 import { USER_INFO_KEY } from '/@/enums/cacheEnum'; 45 import { USER_INFO_KEY } from '/@/enums/cacheEnum';
63 import { getAuthCache } from '/@/utils/auth'; 46 import { getAuthCache } from '/@/utils/auth';
64 import ContentUploadText from './ContentUploadText.vue'; 47 import ContentUploadText from './ContentUploadText.vue';
  48 + import { CustomUploadComp } from './customUplaod/index';
65 49
66 export default defineComponent({ 50 export default defineComponent({
67 components: { 51 components: {
68 Card, 52 Card,
69 BasicForm, 53 BasicForm,
70 Loading, 54 Loading,
71 - Upload,  
72 - PlusOutlined,  
73 Authority, 55 Authority,
74 ContentUploadText, 56 ContentUploadText,
75 - Spin, 57 + CustomUploadComp,
76 }, 58 },
77 setup() { 59 setup() {
78 const userInfo: any = getAuthCache(USER_INFO_KEY); 60 const userInfo: any = getAuthCache(USER_INFO_KEY);
@@ -119,30 +101,8 @@ @@ -119,30 +101,8 @@
119 const { createMessage } = useMessage(); 101 const { createMessage } = useMessage();
120 102
121 const qrcodePic = ref(); 103 const qrcodePic = ref();
122 - const customUploadqrcodePic = async ({ file }) => {  
123 - clearValidate('qrcode');  
124 - if (beforeUploadqrcodePic(file)) {  
125 - qrcodePic.value = '';  
126 - loading.value = true;  
127 - const formData = new FormData();  
128 - formData.append('file', file);  
129 - const response = await qrcodeUpload(formData);  
130 - if (response.fileStaticUri) {  
131 - qrcodePic.value = response.fileStaticUri;  
132 - loading.value = false;  
133 - }  
134 - }  
135 - };  
136 - const beforeUploadqrcodePic = (file: FileItem) => {  
137 - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';  
138 - if (!isJpgOrPng) {  
139 - createMessage.error('只能上传图片文件!');  
140 - }  
141 - const isLt2M = (file.size as number) / 1024 / 1024 < 5;  
142 - if (!isLt2M) {  
143 - createMessage.error('图片大小不能超过5MB!');  
144 - }  
145 - return isJpgOrPng && isLt2M; 104 + const handleSetCodeImgUrl = (d) => {
  105 + qrcodePic.value = d;
146 }; 106 };
147 // 更新 107 // 更新
148 const handleUpdateInfo = async () => { 108 const handleUpdateInfo = async () => {
@@ -372,11 +332,10 @@ @@ -372,11 +332,10 @@
372 compState, 332 compState,
373 qrcodePic, 333 qrcodePic,
374 handleUpdateInfo, 334 handleUpdateInfo,
375 - customUploadqrcodePic,  
376 - beforeUploadqrcodePic,  
377 registerCustomForm, 335 registerCustomForm,
378 loading, 336 loading,
379 isWhereAdmin, 337 isWhereAdmin,
  338 + handleSetCodeImgUrl,
380 }; 339 };
381 }, 340 },
382 }); 341 });
  1 +<script setup name="CustomUploadComp" lang="ts">
  2 + import { PlusOutlined } from '@ant-design/icons-vue';
  3 + import { Upload, Spin } from 'ant-design-vue';
  4 + import { ref, watchEffect } from 'vue';
  5 + import { useUpload } from './hooks/useUploadFile.hook';
  6 + import { logoUpload } from '/@/api/oem';
  7 +
  8 + const props = withDefaults(
  9 + defineProps<{
  10 + imgUrl: string;
  11 + }>(),
  12 + {
  13 + imgUrl: '',
  14 + }
  15 + );
  16 + const emit = defineEmits(['setImg']);
  17 +
  18 + const { beforeUploadVerify } = useUpload();
  19 +
  20 + const uploadLoading = ref(false);
  21 +
  22 + const uploadImgUrl = ref('');
  23 +
  24 + //上传图片接口
  25 + const customUpload = async ({ file }) => {
  26 + try {
  27 + if (beforeUploadVerify(file)) {
  28 + uploadImgUrl.value = '';
  29 + uploadLoading.value = true;
  30 + const formData = new FormData();
  31 + formData.append('file', file);
  32 + const response = await logoUpload(formData);
  33 + if (response.fileStaticUri) {
  34 + uploadImgUrl.value = response.fileStaticUri;
  35 + emit('setImg', uploadImgUrl.value);
  36 + }
  37 + }
  38 + } finally {
  39 + uploadLoading.value = false;
  40 + }
  41 + };
  42 +
  43 + watchEffect(() => {
  44 + init();
  45 + });
  46 + function init() {
  47 + if (!props.imgUrl) uploadImgUrl.value = '';
  48 + uploadImgUrl.value = props.imgUrl;
  49 + }
  50 +</script>
  51 +
  52 +<template>
  53 + <div>
  54 + <Upload
  55 + name="avatar"
  56 + list-type="picture-card"
  57 + class="avatar-uploader"
  58 + :show-upload-list="false"
  59 + :customRequest="customUpload"
  60 + :before-upload="beforeUploadVerify"
  61 + >
  62 + <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" />
  63 + <div v-else>
  64 + <Spin v-if="uploadLoading" tip="正在上传中..." />
  65 + <PlusOutlined v-else />
  66 + <div class="ant-upload-text">上传</div>
  67 + </div>
  68 + </Upload>
  69 + </div>
  70 +</template>
  71 +
  72 +<style lang="less" scoped>
  73 + .fill-img {
  74 + width: 100%;
  75 + height: 100%;
  76 + }
  77 +</style>
  1 +import { useMessage } from '/@/hooks/web/useMessage';
  2 +
  3 +const { createMessage } = useMessage();
  4 +
  5 +export const useUpload = () => {
  6 + //验证图片类型和大小
  7 + const beforeUploadVerify = ({ type, size }) => {
  8 + const isJpgOrPng = type === 'image/jpeg' || type === 'image/png';
  9 + if (!isJpgOrPng) {
  10 + createMessage.error('只能上传图片文件!');
  11 + }
  12 + const limitImgSize = (size as number) / 1024 / 1024 < 5;
  13 + if (!limitImgSize) {
  14 + createMessage.error('图片大小不能超过5MB!');
  15 + }
  16 + return isJpgOrPng && limitImgSize;
  17 + };
  18 + return {
  19 + beforeUploadVerify,
  20 + };
  21 +};
  1 +import CustomUploadComp from './CustomUploadComp.vue';
  2 +export { CustomUploadComp };