fix: 统一上传响应与表单校验处理
- 上传组件统一解析后端响应并暴露错误事件 - AI 资源、模型提供商和工作流表单补齐程序化字段校验同步 - 修正 MinIO 对外访问域名配置
This commit is contained in:
@@ -7,7 +7,9 @@ import { useAppConfig } from '@easyflow/hooks';
|
||||
import { useAccessStore } from '@easyflow/stores';
|
||||
|
||||
import { UploadFilled } from '@element-plus/icons-vue';
|
||||
import { ElIcon, ElUpload } from 'element-plus';
|
||||
import { ElIcon, ElMessage, ElUpload } from 'element-plus';
|
||||
|
||||
import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
@@ -20,7 +22,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['success', 'onChange']);
|
||||
const emit = defineEmits(['success', 'error', 'onChange']);
|
||||
const accessStore = useAccessStore();
|
||||
const headers = ref({
|
||||
'easyflow-token': accessStore.accessToken,
|
||||
@@ -32,7 +34,18 @@ const uploadRef = ref<InstanceType<typeof ElUpload>>();
|
||||
|
||||
// 上传成功回调
|
||||
const handleSuccess: UploadProps['onSuccess'] = (response) => {
|
||||
emit('success', response.data.path);
|
||||
try {
|
||||
emit('success', resolveUploadPath(response));
|
||||
} catch (error) {
|
||||
const normalizedError = normalizeUploadError(error);
|
||||
ElMessage.error(normalizedError.message);
|
||||
emit('error', normalizedError);
|
||||
}
|
||||
};
|
||||
const handleError: UploadProps['onError'] = (error) => {
|
||||
const normalizedError = normalizeUploadError(error);
|
||||
ElMessage.error(normalizedError.message);
|
||||
emit('error', normalizedError);
|
||||
};
|
||||
|
||||
// 文件状态变化回调
|
||||
@@ -66,6 +79,7 @@ defineExpose({
|
||||
:headers="headers"
|
||||
:action="`${apiURL}${props.action}`"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-change="handleChange"
|
||||
multiple
|
||||
:style="{ display: props.visible ? 'block' : 'none' }"
|
||||
|
||||
@@ -6,8 +6,9 @@ import { ref } from 'vue';
|
||||
import { useAppConfig } from '@easyflow/hooks';
|
||||
import { useAccessStore } from '@easyflow/stores';
|
||||
|
||||
import { ElButton, ElUpload } from 'element-plus';
|
||||
import { ElButton, ElMessage, ElUpload } from 'element-plus';
|
||||
|
||||
import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -31,6 +32,7 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits([
|
||||
'success', // 文件上传成功
|
||||
'error',
|
||||
'handleDelete',
|
||||
'handlePreview',
|
||||
'beforeUpload',
|
||||
@@ -51,7 +53,18 @@ const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
||||
emit('handleDelete', file, uploadFiles);
|
||||
};
|
||||
const handleSuccess: UploadProps['onSuccess'] = (response) => {
|
||||
emit('success', response.data.path);
|
||||
try {
|
||||
emit('success', resolveUploadPath(response));
|
||||
} catch (error) {
|
||||
const normalizedError = normalizeUploadError(error);
|
||||
ElMessage.error(normalizedError.message);
|
||||
emit('error', normalizedError);
|
||||
}
|
||||
};
|
||||
const handleError: UploadProps['onError'] = (error) => {
|
||||
const normalizedError = normalizeUploadError(error);
|
||||
ElMessage.error(normalizedError.message);
|
||||
emit('error', normalizedError);
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -66,6 +79,7 @@ const handleSuccess: UploadProps['onSuccess'] = (response) => {
|
||||
:on-remove="handleRemove"
|
||||
:limit="props.limit"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<ElButton type="primary">{{ $t('button.upload') }}</ElButton>
|
||||
</ElUpload>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Plus } from '@element-plus/icons-vue';
|
||||
import { ElIcon, ElImage, ElMessage, ElUpload } from 'element-plus';
|
||||
|
||||
import { $t } from '#/locales';
|
||||
import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
|
||||
|
||||
const props = defineProps({
|
||||
action: {
|
||||
@@ -39,7 +40,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['success', 'update:modelValue']);
|
||||
const emit = defineEmits(['success', 'error', 'update:modelValue']);
|
||||
const accessStore = useAccessStore();
|
||||
const headers = ref({
|
||||
'easyflow-token': accessStore.accessToken,
|
||||
@@ -48,12 +49,24 @@ const headers = ref({
|
||||
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
||||
const localImageUrl = ref(props.modelValue);
|
||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
||||
_response,
|
||||
response,
|
||||
uploadFile,
|
||||
) => {
|
||||
localImageUrl.value = URL.createObjectURL(uploadFile.raw!);
|
||||
emit('success', _response.data.path);
|
||||
emit('update:modelValue', _response.data.path);
|
||||
try {
|
||||
const imageUrl = resolveUploadPath(response);
|
||||
localImageUrl.value = URL.createObjectURL(uploadFile.raw!);
|
||||
emit('success', imageUrl);
|
||||
emit('update:modelValue', imageUrl);
|
||||
} catch (error) {
|
||||
const normalizedError = normalizeUploadError(error);
|
||||
ElMessage.error(normalizedError.message);
|
||||
emit('error', normalizedError);
|
||||
}
|
||||
};
|
||||
const handleAvatarError: UploadProps['onError'] = (error) => {
|
||||
const normalizedError = normalizeUploadError(error);
|
||||
ElMessage.error(normalizedError.message);
|
||||
emit('error', normalizedError);
|
||||
};
|
||||
|
||||
watch(
|
||||
@@ -98,6 +111,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="handleAvatarError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<ElImage
|
||||
|
||||
Reference in New Issue
Block a user