Koa商城项目-公共组件封装

本文主要是介绍Koa商城项目-公共组件封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目地址

koa_system: 🔥🔥🔥Koa2 + React商城项目前端-React + Antd前端-Vue2 + Element-plus后端-Koa2 + Sequelizehttps://gitee.com/ah-ah-bao/koa_system

欢迎大家点击查看,方便的话点一个star~

Vue2Admin和Vue3Admin版本的后台还没有对接口，但是整体的框架已经启动；

uniClient和vue的一样都没有进行开发，但是整体框架已经启动；

目前正在开发ReactAdmin的版本：React + typescript + antd；

后台使用的是：Koa + Mysql + Sequelize；

值得注意的是，该项目只需要本地安装mysql ，但是不需要导入sql文件，运行modal即可。

上传组件

import React from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { API_URL, getToken } from '../../utils/common';
import type { UploadProps } from 'antd';
import type { UploadPropsType } from './index.type';const UploadComponent: React.FC<UploadPropsType> = ({maxCount = 1,showUploadList = true,uploadUrl = '/upload',typename = 'file',onUploadSuccess, 
}) => {const props: UploadProps = {name:typename,action: API_URL + uploadUrl,headers: {Authorization: getToken() || 'defaultTokenValue',},onChange(info) {if (info.file.status !== 'uploading') {console.log(info.file, info.fileList);}switch (info.file.status) {case 'done':message.success(`${info.file.name} file uploaded successfully`);if (onUploadSuccess && info.file.response && info.file.response.data && info.file.response.data.url) {onUploadSuccess(info.file.response.data.url); // 调用回调函数}if (onUploadSuccess && info.file.response && info.file.response.data && info.file.response.data.image) {onUploadSuccess(info.file.response.data.image); // 调用回调函数}break;case 'error':message.error(`${info.file.name} file upload failed.`);break;default:break;}},};return (<Upload {...props} maxCount={maxCount} showUploadList={showUploadList}><Button icon={<UploadOutlined />}>上传</Button></Upload>);
};export default UploadComponent;

类型校验

export interface UploadPropsType {maxCount?:number;showUploadList?:boolean;uploadUrl?:string;typename?:string;onUploadSuccess?: (url: string) => void; // 添加回调函数属性
}

使用方式

import { UploadComponent } from "./UploadComponent";<UploadComponentmaxCount={1}showUploadList={false}uploadUrl="/goods/upload"typename="file"onUploadSuccess={handleUploadSuccess} // 传递回调函数
/>;// maxCount: 最大上传数量
// showUploadList: 是否显示上传列表
// uploadUrl: 上传地址
// typename: 上传文件类型
// onUploadSuccess: 上传成功回调函数  =>>使用方式
const handleUploadSuccess = (url: string) => {setGoodsimg(url); //设置这个返回的路径
};