From 5e440a7dc434c43eb828fa62cf9c12b0078b8565 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 20 一月 2025 11:36:18 +0800 Subject: [PATCH] !173 发布 5.3.0-BETA 公测版本 Merge pull request !173 from 疯狂的狮子Li/dev --- src/components/ImageUpload/index.vue | 251 ++++++++++++++++++++++++++----------------------- 1 files changed, 133 insertions(+), 118 deletions(-) diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue index 9753d0c..0778121 100644 --- a/src/components/ImageUpload/index.vue +++ b/src/components/ImageUpload/index.vue @@ -1,100 +1,146 @@ +<template> + <div class="component-upload-image"> + <el-upload + ref="imageUpload" + multiple + :action="uploadImgUrl" + list-type="picture-card" + :on-success="handleUploadSuccess" + :before-upload="handleBeforeUpload" + :limit="limit" + :on-error="handleUploadError" + :on-exceed="handleExceed" + :before-remove="handleDelete" + :show-file-list="true" + :headers="headers" + :file-list="fileList" + :on-preview="handlePictureCardPreview" + :class="{ hide: fileList.length >= limit }" + > + <el-icon class="avatar-uploader-icon"> + <plus /> + </el-icon> + </el-upload> + <!-- 涓婁紶鎻愮ず --> + <div v-if="showTip" class="el-upload__tip"> + 璇蜂笂浼� + <template v-if="fileSize"> + 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> + </template> + <template v-if="fileType"> + 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join('/') }}</b> + </template> + 鐨勬枃浠� + </div> + + <el-dialog v-model="dialogVisible" title="棰勮" width="800px" append-to-body> + <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" /> + </el-dialog> + </div> +</template> + <script setup lang="ts"> -import { getToken } from "@/utils/auth"; -import { listByIds, delOss } from "@/api/system/oss"; -import { ComponentInternalInstance, PropType } from "vue"; -import { OssVO } from "@/api/system/oss/types"; -import { ElUpload, UploadFile } from "element-plus"; +import { listByIds, delOss } from '@/api/system/oss'; +import { OssVO } from '@/api/system/oss/types'; +import { propTypes } from '@/utils/propTypes'; +import { globalHeaders } from '@/utils/request'; +import { compressAccurately } from 'image-conversion'; const props = defineProps({ - modelValue: [String, Object, Array], + modelValue: { + type: [String, Object, Array], + default: () => [] + }, // 鍥剧墖鏁伴噺闄愬埗 - limit: { - type: Number, - default: 5, - }, + limit: propTypes.number.def(5), // 澶у皬闄愬埗(MB) - fileSize: { - type: Number, - default: 5, - }, + fileSize: propTypes.number.def(5), // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] - fileType: { - type: Array as PropType<string[]>, - default: () => ["png", "jpg", "jpeg"], - }, + fileType: propTypes.array.def(['png', 'jpg', 'jpeg']), // 鏄惁鏄剧ず鎻愮ず isShowTip: { type: Boolean, default: true }, + // 鏄惁鏀寔鍘嬬缉锛岄粯璁ゅ惁 + compressSupport: { + type: Boolean, + default: false + }, + // 鍘嬬缉鐩爣澶у皬锛屽崟浣岾B銆傞粯璁�300KB浠ヤ笂鏂囦欢鎵嶅帇缂╋紝骞跺帇缂╄嚦300KB浠ュ唴 + compressTargetSize: propTypes.number.def(300) }); const { proxy } = getCurrentInstance() as ComponentInternalInstance; const emit = defineEmits(['update:modelValue']); const number = ref(0); const uploadList = ref<any[]>([]); -const dialogImageUrl = ref(""); +const dialogImageUrl = ref(''); const dialogVisible = ref(false); const baseUrl = import.meta.env.VITE_APP_BASE_API; -const uploadImgUrl = ref(baseUrl + "/system/oss/upload"); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 -const headers = ref({ Authorization: "Bearer " + getToken() }); +const uploadImgUrl = ref(baseUrl + '/resource/oss/upload'); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 +const headers = ref(globalHeaders()); const fileList = ref<any[]>([]); -const showTip = computed( - () => props.isShowTip && (props.fileType || props.fileSize) -); +const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize)); -const imageUploadRef = ref(ElUpload); +const imageUploadRef = ref<ElUploadInstance>(); -watch(() => props.modelValue, async val => { - if (val) { - // 棣栧厛灏嗗�艰浆涓烘暟缁� - let list:OssVO[] = []; - if (Array.isArray(val)) { - list = val as OssVO[]; - } else { - const res = await listByIds(val as string) - list = res.data - } - // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� - fileList.value = list.map(item => { - // 瀛楃涓插洖鏄惧鐞� 濡傛灉姝ゅ瀛樼殑鏄痷rl鍙洿鎺ュ洖鏄� 濡傛灉瀛樼殑鏄痠d闇�瑕佽皟鐢ㄦ帴鍙f煡鍑烘潵 - let itemData; - if (typeof item === "string") { - itemData = { name: item, url: item }; +watch( + () => props.modelValue, + async (val: string) => { + if (val) { + // 棣栧厛灏嗗�艰浆涓烘暟缁� + let list: OssVO[] = []; + if (Array.isArray(val)) { + list = val as OssVO[]; } else { - // 姝ゅname浣跨敤ossId 闃叉鍒犻櫎鍑虹幇閲嶅悕 - itemData = { name: item.ossId, url: item.url, ossId: item.ossId }; + const res = await listByIds(val); + list = res.data; } - return itemData; - }); - } else { - fileList.value = []; - return []; - } -},{ deep: true, immediate: true }); + // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� + fileList.value = list.map((item) => { + // 瀛楃涓插洖鏄惧鐞� 濡傛灉姝ゅ瀛樼殑鏄痷rl鍙洿鎺ュ洖鏄� 濡傛灉瀛樼殑鏄痠d闇�瑕佽皟鐢ㄦ帴鍙f煡鍑烘潵 + let itemData; + if (typeof item === 'string') { + itemData = { name: item, url: item }; + } else { + // 姝ゅname浣跨敤ossId 闃叉鍒犻櫎鍑虹幇閲嶅悕 + itemData = { name: item.ossId, url: item.url, ossId: item.ossId }; + } + return itemData; + }); + } else { + fileList.value = []; + return []; + } + }, + { deep: true, immediate: true } +); /** 涓婁紶鍓峫oading鍔犺浇 */ const handleBeforeUpload = (file: any) => { let isImg = false; if (props.fileType.length) { - let fileExtension = ""; - if (file.name.lastIndexOf(".") > -1) { - fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); + let fileExtension = ''; + if (file.name.lastIndexOf('.') > -1) { + fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1); } - isImg = props.fileType.some((type) => { + isImg = props.fileType.some((type: any) => { if (file.type.indexOf(type) > -1) return true; if (fileExtension && fileExtension.indexOf(type) > -1) return true; return false; }); } else { - isImg = file.type.indexOf("image") > -1; + isImg = file.type.indexOf('image') > -1; } if (!isImg) { - proxy?.$modal.msgError( - `鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${props.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!` - ); + proxy?.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${props.fileType.join('/')}鍥剧墖鏍煎紡鏂囦欢!`); + return false; + } + if (file.name.includes(',')) { + proxy?.$modal.msgError('鏂囦欢鍚嶄笉姝g‘锛屼笉鑳藉寘鍚嫳鏂囬�楀彿!'); return false; } if (props.fileSize) { @@ -104,14 +150,22 @@ return false; } } - proxy?.$modal.loading("姝e湪涓婁紶鍥剧墖锛岃绋嶅��..."); - number.value++; -} + + //鍘嬬缉鍥剧墖锛屽紑鍚帇缂╁苟涓斿ぇ浜庢寚瀹氱殑鍘嬬缉澶у皬鏃舵墠鍘嬬缉 + if (props.compressSupport && file.size / 1024 > props.compressTargetSize) { + proxy?.$modal.loading('姝e湪涓婁紶鍥剧墖锛岃绋嶅��...'); + number.value++; + return compressAccurately(file, props.compressTargetSize); + } else { + proxy?.$modal.loading('姝e湪涓婁紶鍥剧墖锛岃绋嶅��...'); + number.value++; + } +}; // 鏂囦欢涓暟瓒呭嚭 const handleExceed = () => { proxy?.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`); -} +}; // 涓婁紶鎴愬姛鍥炶皟 const handleUploadSuccess = (res: any, file: UploadFile) => { @@ -122,102 +176,63 @@ number.value--; proxy?.$modal.closeLoading(); proxy?.$modal.msgError(res.msg); - imageUploadRef.value.handleRemove(file); + imageUploadRef.value?.handleRemove(file); uploadedSuccessfully(); } -} +}; // 鍒犻櫎鍥剧墖 const handleDelete = (file: UploadFile): boolean => { - const findex = fileList.value.map(f => f.name).indexOf(file.name); + const findex = fileList.value.map((f) => f.name).indexOf(file.name); if (findex > -1 && uploadList.value.length === number.value) { let ossId = fileList.value[findex].ossId; delOss(ossId); fileList.value.splice(findex, 1); - emit("update:modelValue", listToString(fileList.value)); + emit('update:modelValue', listToString(fileList.value)); return false; } return true; -} +}; // 涓婁紶缁撴潫澶勭悊 const uploadedSuccessfully = () => { if (number.value > 0 && uploadList.value.length === number.value) { - fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); + fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value); uploadList.value = []; number.value = 0; - emit("update:modelValue", listToString(fileList.value)); + emit('update:modelValue', listToString(fileList.value)); proxy?.$modal.closeLoading(); } -} +}; // 涓婁紶澶辫触 const handleUploadError = () => { - proxy?.$modal.msgError("涓婁紶鍥剧墖澶辫触"); + proxy?.$modal.msgError('涓婁紶鍥剧墖澶辫触'); proxy?.$modal.closeLoading(); -} +}; // 棰勮 const handlePictureCardPreview = (file: any) => { dialogImageUrl.value = file.url; dialogVisible.value = true; -} +}; // 瀵硅薄杞垚鎸囧畾瀛楃涓插垎闅� const listToString = (list: any[], separator?: string) => { - let strs = ""; - separator = separator || ","; + let strs = ''; + separator = separator || ','; for (let i in list) { - if(undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) { + if (undefined !== list[i].ossId && list[i].url.indexOf('blob:') !== 0) { strs += list[i].ossId + separator; } } - return strs != "" ? strs.substring(0, strs.length - 1) : ""; -} + return strs != '' ? strs.substring(0, strs.length - 1) : ''; +}; </script> - -<template> - <div class="component-upload-image"> - <el-upload - multiple - :action="uploadImgUrl" - list-type="picture-card" - :on-success="handleUploadSuccess" - :before-upload="handleBeforeUpload" - :limit="limit" - :on-error="handleUploadError" - :on-exceed="handleExceed" - ref="imageUpload" - :before-remove="handleDelete" - :show-file-list="true" - :headers="headers" - :file-list="fileList" - :on-preview="handlePictureCardPreview" - :class="{ hide: fileList.length >= limit }" - > - <el-icon class="avatar-uploader-icon"><plus /></el-icon> - </el-upload> - <!-- 涓婁紶鎻愮ず --> - <div class="el-upload__tip" v-if="showTip"> - 璇蜂笂浼� - <template v-if="fileSize"> - 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> - </template> - <template v-if="fileType"> - 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> - </template> - 鐨勬枃浠� - </div> - - <el-dialog v-model="dialogVisible" title="棰勮" width="800px" append-to-body> - <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" /> - </el-dialog> - </div> -</template> <style scoped lang="scss"> // .el-upload--picture-card 鎺у埗鍔犲彿閮ㄥ垎 :deep(.hide .el-upload--picture-card) { - display: none; + display: none; } </style> -- Gitblit v1.9.3