From e10f112fa075441b1799fb6c0b61f95ece70d9c7 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期二, 15 八月 2023 13:53:34 +0800 Subject: [PATCH] fix 修复 使用 localStorage 返回值为null问题 --- src/components/ImageUpload/index.vue | 305 ++++++++++++++++++++++++-------------------------- 1 files changed, 149 insertions(+), 156 deletions(-) diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue index 9753d0c..d8ed32b 100644 --- a/src/components/ImageUpload/index.vue +++ b/src/components/ImageUpload/index.vue @@ -1,32 +1,64 @@ +<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> + <script setup lang="ts"> -import { getToken } from "@/utils/auth"; import { listByIds, delOss } from "@/api/system/oss"; -import { ComponentInternalInstance, PropType } from "vue"; +import { ComponentInternalInstance } from "vue"; import { OssVO } from "@/api/system/oss/types"; -import { ElUpload, UploadFile } from "element-plus"; +import { propTypes } from '@/utils/propTypes'; +import {globalHeaders} from "@/utils/request"; const props = defineProps({ - modelValue: [String, Object, Array], - // 鍥剧墖鏁伴噺闄愬埗 - limit: { - type: Number, - default: 5, - }, - // 澶у皬闄愬埗(MB) - fileSize: { - type: Number, - default: 5, - }, - // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] - fileType: { - type: Array as PropType<string[]>, - default: () => ["png", "jpg", "jpeg"], - }, - // 鏄惁鏄剧ず鎻愮ず - isShowTip: { - type: Boolean, - default: true - }, + modelValue: [String, Object, Array], + // 鍥剧墖鏁伴噺闄愬埗 + limit: propTypes.number.def(5), + // 澶у皬闄愬埗(MB) + fileSize: propTypes.number.def(5), + // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] + fileType: propTypes.array.def(["png", "jpg", "jpeg"]), + // 鏄惁鏄剧ず鎻愮ず + isShowTip: { + type: Boolean, + default: true + }, }); const { proxy } = getCurrentInstance() as ComponentInternalInstance; @@ -37,183 +69,144 @@ 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) + () => 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[]; + 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 }; + } else { + // 姝ゅname浣跨敤ossId 闃叉鍒犻櫎鍑虹幇閲嶅悕 + itemData = { name: item.ossId, url: item.url, ossId: item.ossId }; + } + return itemData; + }); } else { - const res = await listByIds(val as string) - list = res.data + fileList.value = []; + return []; } - // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� - 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 }); +}, { 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 isImg = false; + if (props.fileType.length) { + let fileExtension = ""; + if (file.name.lastIndexOf(".") > -1) { + fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); + } + 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 = props.fileType.some((type) => { - 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; - } - if (!isImg) { - proxy?.$modal.msgError( - `鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${props.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!` - ); - return false; - } - if (props.fileSize) { - const isLt = file.size / 1024 / 1024 < props.fileSize; - if (!isLt) { - proxy?.$modal.msgError(`涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`); - return false; + if (!isImg) { + proxy?.$modal.msgError( + `鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${props.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!` + ); + return false; } - } - proxy?.$modal.loading("姝e湪涓婁紶鍥剧墖锛岃绋嶅��..."); - number.value++; + if (props.fileSize) { + const isLt = file.size / 1024 / 1024 < props.fileSize; + if (!isLt) { + proxy?.$modal.msgError(`涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`); + return false; + } + } + proxy?.$modal.loading("姝e湪涓婁紶鍥剧墖锛岃绋嶅��..."); + number.value++; } // 鏂囦欢涓暟瓒呭嚭 const handleExceed = () => { - proxy?.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`); + proxy?.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${props.limit} 涓�!`); } // 涓婁紶鎴愬姛鍥炶皟 const handleUploadSuccess = (res: any, file: UploadFile) => { - if (res.code === 200) { - uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId }); - uploadedSuccessfully(); - } else { - number.value--; - proxy?.$modal.closeLoading(); - proxy?.$modal.msgError(res.msg); - imageUploadRef.value.handleRemove(file); - uploadedSuccessfully(); - } + if (res.code === 200) { + uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId }); + uploadedSuccessfully(); + } else { + number.value--; + proxy?.$modal.closeLoading(); + proxy?.$modal.msgError(res.msg); + imageUploadRef.value?.handleRemove(file); + uploadedSuccessfully(); + } } // 鍒犻櫎鍥剧墖 const handleDelete = (file: UploadFile): boolean => { - 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)); - return false; - } - return true; + 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)); + 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); - uploadList.value = []; - number.value = 0; - emit("update:modelValue", listToString(fileList.value)); - proxy?.$modal.closeLoading(); - } + if (number.value > 0 && uploadList.value.length === number.value) { + fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); + uploadList.value = []; + number.value = 0; + emit("update:modelValue", listToString(fileList.value)); + proxy?.$modal.closeLoading(); + } } // 涓婁紶澶辫触 const handleUploadError = () => { - proxy?.$modal.msgError("涓婁紶鍥剧墖澶辫触"); - proxy?.$modal.closeLoading(); + proxy?.$modal.msgError("涓婁紶鍥剧墖澶辫触"); + proxy?.$modal.closeLoading(); } // 棰勮 const handlePictureCardPreview = (file: any) => { - dialogImageUrl.value = file.url; - dialogVisible.value = true; + dialogImageUrl.value = file.url; + dialogVisible.value = true; } // 瀵硅薄杞垚鎸囧畾瀛楃涓插垎闅� const listToString = (list: any[], separator?: string) => { - let strs = ""; - separator = separator || ","; - for (let i in list) { - if(undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) { - strs += list[i].ossId + separator; + let strs = ""; + separator = separator || ","; + for (let i in list) { + 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 鎺у埗鍔犲彿閮ㄥ垎 -- Gitblit v1.9.3