Skip to content

Commit

Permalink
Merge pull request #218 from LQH520/feature_cfl
Browse files Browse the repository at this point in the history 
解决上传超过限制，视图层添加dom的问题
  • Loading branch information
@kanyxmo
kanyxmo authored Jan 8, 2025
2 parents 80f1c08 + 64c152a commit 0c619f2
Showing 1 changed file with 137 additions and 115 deletions.
252 changes: 137 additions & 115 deletions src/components/ma-upload/components/image-upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,69 @@
<!-- 单图 -->
<a-space wrap>
<div
:class="'image-list ' + (config.rounded ? 'rounded-full' : '')"
v-if="! config.multiple && currentItem?.url && config.showList"
:class="'image-list ' + (config.rounded ? 'rounded-full' : '')"
v-if="!config.multiple && currentItem?.url && config.showList"
>
<a-button
class="delete"
@click="removeSignImage()"
>
<a-button class="delete" @click="removeSignImage()">
<template #icon>
<icon-delete/>
<icon-delete />
</template>
</a-button>
<a-image
width="130"
height="130"
:class="config.rounded ? 'rounded-full' : ''"
:src="currentItem.url"
width="130"
height="130"
:class="config.rounded ? 'rounded-full' : ''"
:src="currentItem.url"
/>
</div>
<!-- 多图显示 -->
<template v-else-if="config.multiple && config.showList">
<div
:class="'image-list ' + (config.rounded ? 'rounded-full' : '')"
v-for="(image, idx) in showImgList" :key="idx"
:class="'image-list ' + (config.rounded ? 'rounded-full' : '')"
v-for="(image, idx) in showImgList"
:key="idx"
>
<a-button
class="delete"
@click="removeImage(idx)"
>
<a-button class="delete" @click="removeImage(idx)">
<template #icon>
<icon-delete/>
<icon-delete />
</template>
</a-button>
<a-image
width="130"
height="130"
:class="config.rounded ? 'rounded-full' : ''"
:src="image.url"
width="130"
height="130"
:class="config.rounded ? 'rounded-full' : ''"
:src="image.url"
/>
</div>
</template>

<a-upload
:custom-request="uploadImageHandler"
:show-file-list="false"
:multiple="config.multiple"
:accept="config.accept ?? '.jpg,jpeg,.gif,.png,.svg,.bpm'"
:disabled="config.disabled"
:tip="config.tip"
:limit="config.limit"
:custom-request="uploadImageHandler"
:show-file-list="false"
:multiple="config.multiple"
:accept="config.accept ?? '.jpg,jpeg,.gif,.png,.svg,.bpm'"
:disabled="config.disabled"
:tip="config.tip"
:limit="config.limit"
>
<template #upload-button>
<slot name="customer">
<div
:class="'upload-skin ' + (config.rounded ? 'rounded-full' : 'rounded-sm')"
v-if="!props.modelValue || config.multiple"
:class="
'upload-skin ' +
(config.rounded ? 'rounded-full' : 'rounded-sm')
"
v-if="!props.modelValue || config.multiple"
>
<div class="icon text-3xl">
<component :is="config.icon"/>
<component :is="config.icon" />
</div>
<div class="title">
{{ config.title === 'buttonText' ? $t('upload.buttonText') : config.title }}
{{
config.title === "buttonText"
? $t("upload.buttonText")
: config.title
}}
</div>
</div>
</slot>
Expand All @@ -73,114 +75,133 @@
</div>
</template>
<script setup>
import { ref, inject, watch } from 'vue'
import tool from '@/utils/tool'
import { isArray, throttle } from 'lodash'
import { getFileUrl, uploadRequest } from '../js/utils'
import { Message } from '@arco-design/web-vue'
import { ref, inject, watch } from "vue";
import tool from "@/utils/tool";
import { isArray, throttle } from "lodash";
import { getFileUrl, uploadRequest } from "../js/utils";
import { Message } from "@arco-design/web-vue";
import { useI18n } from 'vue-i18n'
import { useI18n } from "vue-i18n";
const { t } = useI18n()
const { t } = useI18n();
const props = defineProps({
modelValue: {
type: [String, Number, Array], default: () => {
}
}
})
const emit = defineEmits(['update:modelValue'])
const config = inject('config')
const storageMode = inject('storageMode')
const showImgList = ref([])
const signImage = ref()
const currentItem = ref({})
const uploadImageHandler = async(options) => {
if(!options.fileItem) return
if(!config.multiple) {
currentItem.value = options.fileItem
type: [String, Number, Array],
default: () => {},
},
});
const emit = defineEmits(["update:modelValue"]);
const config = inject("config");
const storageMode = inject("storageMode");
const showImgList = ref([]);
const signImage = ref();
const currentItem = ref({});
const uploadImageHandler = async (options) => {
if (!options.fileItem) return;
if (!config.multiple) {
currentItem.value = options.fileItem;
}
const file = options.fileItem.file
if(file.size > config.size) {
Message.warning(file.name + ' ' + t('upload.sizeLimit'))
currentItem.value = {}
return
const file = options.fileItem.file;
if (file.size > config.size) {
Message.warning(file.name + " " + t("upload.sizeLimit"));
//解决上传超过限制，视图层添加dom的问题
showImgList.value.splice(showImgLen.value, 1);
currentItem.value = {};
return;
}
const result = await uploadRequest(file, 'image', 'uploadImage', config.requestData)
const result = await uploadRequest(
file,
"image",
"uploadImage",
config.requestData
);
if(result) {
result.url = tool.attachUrl(result.url, storageMode[result.storage_mode])
if(!config.multiple) {
signImage.value = result[config.returnType]
emit('update:modelValue', signImage.value)
if (result) {
result.url = tool.attachUrl(result.url, storageMode[result.storage_mode]);
if (!config.multiple) {
signImage.value = result[config.returnType];
emit("update:modelValue", signImage.value);
} else {
showImgList.value.push(result)
let files = []
files = showImgList.value.map(item => {
return item[config.returnType]
})
emit('update:modelValue', files)
showImgList.value.push(result);
let files = [];
files = showImgList.value.map((item) => {
return item[config.returnType];
});
emit("update:modelValue", files);
}
}
}
};
const removeSignImage = () => {
currentItem.value = {}
signImage.value = undefined
emit('update:modelValue', null)
}
currentItem.value = {};
signImage.value = undefined;
emit("update:modelValue", null);
};
const removeImage = (idx) => {
showImgList.value.splice(idx, 1)
let files = []
files = showImgList.value.map(item => {
return item[config.returnType]
})
emit('update:modelValue', files)
}
showImgList.value.splice(idx, 1);
let files = [];
files = showImgList.value.map((item) => {
return item[config.returnType];
});
emit("update:modelValue", files);
};
const init = throttle(async() => {
if(config.multiple) {
if(isArray(props.modelValue) && props.modelValue.length > 0) {
const result = await props.modelValue.map(async(item) => {
return await getFileUrl(config.returnType, item, storageMode)
const init = throttle(async () => {
if (config.multiple) {
if (isArray(props.modelValue) && props.modelValue.length > 0) {
const result = await props.modelValue.map(async (item) => {
return await getFileUrl(config.returnType, item, storageMode);
});
const data = await Promise.all(result)
if(config.returnType === 'url') {
showImgList.value = data.map(url => {
return { url }
})
const data = await Promise.all(result);
if (config.returnType === "url") {
showImgList.value = data.map((url) => {
return { url };
});
} else {
showImgList.value = data.map(item => {
return { url: item.url, [config.returnType]: item[config.returnType] }
})
showImgList.value = data.map((item) => {
return {
url: item.url,
[config.returnType]: item[config.returnType],
};
});
}
} else {
showImgList.value = []
showImgList.value = [];
}
} else if(props.modelValue) {
if(config.returnType === 'url') {
signImage.value = props.modelValue
currentItem.value.url = props.modelValue
} else if (props.modelValue) {
if (config.returnType === "url") {
signImage.value = props.modelValue;
currentItem.value.url = props.modelValue;
} else {
const result = await getFileUrl(config.returnType, props.modelValue, storageMode)
signImage.value = result.url
currentItem.value.url = result.url
const result = await getFileUrl(
config.returnType,
props.modelValue,
storageMode
);
signImage.value = result.url;
currentItem.value.url = result.url;
}
currentItem.value.percent = 100
currentItem.value.status = 'complete'
currentItem.value.percent = 100;
currentItem.value.status = "complete";
} else {
removeSignImage()
removeSignImage();
}
}, 1000);
watch(() => props.modelValue, (val) => {
init()
}, {
deep: true, immediate: true
})
watch(
() => props.modelValue,
(val) => {
init();
},
{
deep: true,
immediate: true,
}
);
</script>

<style lang="less" scoped>
Expand All @@ -194,7 +215,8 @@ watch(() => props.modelValue, (val) => {
align-items: center;
justify-content: center;
.icon, .title {
.icon,
.title {
color: var(--color-text-3);
}
}
Expand Down Expand Up @@ -231,4 +253,4 @@ watch(() => props.modelValue, (val) => {
.upload-skin:hover {
border: 1px dashed rgb(var(--primary-6));
}
</style>
</style>

0 comments on commit 0c619f2

Please sign in to comment.