You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.6 KiB
101 lines
2.6 KiB
<script setup>
|
|
import { ref, watchEffect } from 'vue';
|
|
import { MessagePlugin } from 'tdesign-vue-next';
|
|
import { REQUEST_UPLOAD_FILE } from '@/config/urls';
|
|
import auth from '@/utils/auth';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Array],
|
|
default: '',
|
|
},
|
|
subject: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const originFile = ref([]);
|
|
|
|
watchEffect(() => {
|
|
if (props.multiple && props.modelValue) {
|
|
originFile.value = [...(props.modelValue || []).map((url) => ({ name: 'image', url }))];
|
|
} else if (props.modelValue) {
|
|
originFile.value = [{ name: 'image', url: props.modelValue }];
|
|
} else {
|
|
originFile.value = [];
|
|
}
|
|
});
|
|
|
|
const uploadRef = ref();
|
|
|
|
const handleFail = () => {
|
|
MessagePlugin.error('文件上传失败');
|
|
};
|
|
const handleSuccess = ({ response }) => {
|
|
if (props.multiple) {
|
|
const [{ data }] = response;
|
|
const temp = [...(props.modelValue || [])];
|
|
temp.push(data);
|
|
emit('update:modelValue', temp);
|
|
return;
|
|
}
|
|
const { data } = response;
|
|
emit('update:modelValue', data);
|
|
};
|
|
const handleRemove = ({ index }) => {
|
|
if (props.multiple) {
|
|
const temp = [...(props.modelValue || [])];
|
|
temp.splice(index, 1);
|
|
emit('update:modelValue', temp);
|
|
return;
|
|
}
|
|
emit('update:modelValue', '');
|
|
};
|
|
</script>
|
|
<template>
|
|
<t-upload
|
|
:class="s.root"
|
|
ref="uploadRef"
|
|
v-model="originFile"
|
|
:action="REQUEST_UPLOAD_FILE(subject)"
|
|
theme="image"
|
|
accept="image/*"
|
|
:headers="{
|
|
Authorization: `Bearer ${auth.getToken()}`,
|
|
}"
|
|
:locale="{
|
|
triggerUploadText: {
|
|
image: '请选择图片',
|
|
},
|
|
}"
|
|
:multiple="multiple"
|
|
@fail="handleFail"
|
|
@success="handleSuccess"
|
|
@remove="handleRemove"
|
|
/>
|
|
</template>
|
|
|
|
<style lang="less" module="s">
|
|
.root {
|
|
:global {
|
|
.t-upload__card-name {
|
|
display: none
|
|
}
|
|
|
|
.t-upload__card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.t-image {
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|