vben admin 学习记录（四）
本文最后更新于 2023-12-16，文章内容可能已经过时，请注意发布时间。
title: vben admin 学习记录（四）
这个是文件上传的代码，本身来说按照官网给的就可以调用，但是如果遇到了一些问题，下面会有对应的解决方法 这个可能是vben中组件封装或者你返回值有问题，可以在 这个情况的话可能是框架原因导致的，目前在修复好之前，有两种解决方案，一种是使用ant的ui自己写，还有就是把
id: 12b75dd8-4ed3-4a25-bbc4-cc6a3a1f6974
date: 2023-12-11 00:41:25
auther: liqi
excerpt: vbenadmin Upload组件 这个是文件上传的代码，本身来说按照官网给的就可以调用，但是如果遇到了一些问题，下面会有对应的解决方法 代码
categories:
tags:vue
vbenadmin Upload组件
代码
<template>
<BasicDrawer
v-bind="$attrs"
@ok="clickOk"
@register="register"
title="提交"
:showFooter="true"
width="45%"
>
<div>
<BasicForm @register="registerForm" />
</div>
</BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { getTagOption, getClassificationOption, addBlog } from '@/views/bolg/home/api/home';
import { useMessage } from '/@/hooks/web/useMessage';
import { uploadApi } from '@/api/sys/upload';
import { useGo } from "@/hooks/web/usePage";
const schemas: FormSchema[] = [
{
field: 'sort_id',
component: 'ApiSelect',
label: '分类',
componentProps: {
api: getClassificationOption,
resultField: 'list',
// 展示的名字
labelField: 'name',
// 展示的值
valueField: 'id',
onChange: (e) => {
console.log('selected:', e);
},
onOptionsChange: (options) => {
console.log('get options', options.length, options);
},
},
required: true,
colProps: {
span: 12,
},
},
{
field: 'tag',
component: 'ApiSelect',
label: '标签',
componentProps: {
api: getTagOption,
resultField: 'list',
// 展示的名字
labelField: 'name',
// 展示的值
valueField: 'id',
},
required: true,
colProps: {
span: 12,
},
},
// {
// field: 'tag',
// component: 'Checkbox',
// label: '标签',
// componentProps: {
// // api: getTagOption,
// resultField: 'list',
// schema: [
// {
// title:'list'
// }
// ],
// // 展示的名字
// labelField: 'name',
// // 展示的值
// valueField: 'id',
// },
// required: true,
// colProps: {
// span: 12,
// },
// },
{
field: 'cover',
component: 'Upload',
label: '封面',
componentProps: {
api: uploadApi,
onChange: (fileList) => {
// createMessage.info(`已上传文件${JSON.stringify(list)}`);
// cover.value = list;
console.log(`已上传文件${JSON.stringify(fileList)}`)
const cover = ref();
cover.value = fileList;
console.log(fileList)
},
emptyHidePreview: true,
maxNumber: 1,
},
colProps: {
span: 24,
},
},
{
field: 'excerpt',
component: 'InputTextArea',
label: '摘要',
colProps: {
span: 24,
},
},
];
export default defineComponent({
components: { BasicDrawer, BasicForm },
setup() {
const go = useGo();
const content = ref();
const cover = ref();
const { createMessage, createErrorModal } = useMessage();
const [registerForm, { getFieldsValue }] = useForm({
labelWidth: 120,
schemas,
showActionButtonGroup: false,
actionColOptions: {
span: 24,
},
});
const [register, { closeDrawer }] = useDrawerInner((data) => {
console.log(data);
content.value = data;
});
function clickOk() {
var data = [];
data.form = getFieldsValue();
data.content = content.value;
data.cover = cover.value;
console.log(data.content.title);
addBlog({
title: data.content.title,
content: data.content.content,
sort_id: data.form.sort_id,
tag: data.form.tag,
cover: data.form.cover,
excerpt: data.form.excerpt,
}).then((res) => {
if (res.code == 0) {
go();
createMessage.success(res.message);
} else {
createErrorModal(res.message);
}
});
closeDrawer();
}
function hasChanges(list: string[]) {
// createMessage.info(`已上传文件${JSON.stringify(list)}`);
// cover.value = list;
console.log(`已上传文件${JSON.stringify(list)}`)
console.log(list)
}
return { register, schemas, registerForm, clickOk, cover, hasChanges, };
},
});
</script>
上传成功，但fieldList为空
src/components/Upload/src/UploadModal.vue中修改// 点击保存
function handleOk() {
const { maxNumber } = props;
if (fileListRef.value.length > maxNumber) {
return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
}
if (isUploadingRef.value) {
return createMessage.warning(t('component.upload.saveWarn'));
}
const fileList: string[] = [];
for (const item of fileListRef.value) {
const { status, responseData } = item;
if (status === UploadResultStatus.SUCCESS && responseData) {
// 这里之前没有 result result是我返回数据的键，根据你们后端设定的改，后端返回url下标
console.log(responseData.result.url)
fileList.push(responseData.result.url);
}
}
// 存在一个上传成功的即可保存
if (fileList.length <= 0) {
return createMessage.warning(t('component.upload.saveError'));
}
fileListRef.value = [];
closeModal();
emit('change', fileList);
}
开发环境正常，生产环境不能使用
src/api/sys/upload.ts中的onUploadProgress注释掉即可暂时解决import { UploadApiResult } from './model/uploadModel';
import { defHttp } from '/@/utils/http/axios';
import { UploadFileParams } from '/#/axios';
import { useGlobSetting } from '/@/hooks/setting';
const { uploadUrl = '' } = useGlobSetting();
/**
* @description: Upload interface
*/
export function uploadApi(
params: UploadFileParams,
onUploadProgress: (progressEvent: ProgressEvent) => void,
) {
return defHttp.uploadFile<UploadApiResult>(
{
url: uploadUrl,
// `onUploadProgress`, // 注释掉这个
},
params,
);
}
