Skip to content

C
CivManage
Commit bb5f817d authored by 张烨's avatar 张烨
Browse files
Options

feat: 图片上传功能和代理配置

parent 6f787970
Show whitespace changes
Inline Side-by-side
Showing with 170 additions and 94 deletions
.env
View file @ bb5f817d
# PUBLIC_PATH = reactOMS, 默认转发 /cityinterface
PROXY = http://localhost:8005/
PROXY=/Cityinterface:http://192.168.10.151:8055;/Publish:http://192.168.10.151:8055;/Web4:http://192.168.10.151:8055;/CityTemp:http://192.168.10.151:8055
# 可设置第二个代理，test为转发前缀，后面为代理转发的地址
# PROXY2 = test : http://localhost:8006/
......
server/middlewares/addDevMiddlewares.js
View file @ bb5f817d
......@@ -14,6 +14,116 @@ function createWebpackMiddleware(compiler, publicPath) {
});
}
const setupProxyFeature = (app, webpackConfig) => {
console.log(webpackConfig);
if (!Array.isArray(webpackConfig.proxy)) {
if (Object.prototype.hasOwnProperty.call(webpackConfig.proxy, 'target')) {
webpackConfig.proxy = [webpackConfig.proxy];
} else {
webpackConfig.proxy = Object.keys(webpackConfig.proxy).map(context => {
let proxyOptions;
// For backwards compatibility reasons.
const correctedContext = context
.replace(/^\*$/, '**')
.replace(/\/\*$/, '');
if (typeof webpackConfig.proxy[context] === 'string') {
proxyOptions = {
context: correctedContext,
target: webpackConfig.proxy[context],
};
} else {
proxyOptions = Object.assign({}, webpackConfig.proxy[context]);
proxyOptions.context = correctedContext;
}
proxyOptions.logLevel = proxyOptions.logLevel || 'warn';
return proxyOptions;
});
}
}
// eslint-disable-next-line consistent-return
const getProxyMiddleware = proxyConfig => {
const context = proxyConfig.context || proxyConfig.path;
// It is possible to use the `bypass` method without a `target`.
// However, the proxy middleware has no use in this case, and will fail to instantiate.
if (proxyConfig.target) {
return createProxyMiddleware(context, proxyConfig);
}
};
/**
* Assume a proxy configuration specified as:
* proxy: [
* {
* context: ...,
* ...options...
* },
* // or:
* function() {
* return {
* context: ...,
* ...options...
* };
* }
* ]
*/
webpackConfig.proxy.forEach(proxyConfigOrCallback => {
let proxyMiddleware;
let proxyConfig =
typeof proxyConfigOrCallback === 'function'
? proxyConfigOrCallback()
: proxyConfigOrCallback;
proxyMiddleware = getProxyMiddleware(proxyConfig);
if (proxyConfig.ws) {
this.websocketProxies.push(proxyMiddleware);
}
// eslint-disable-next-line consistent-return
const handle = (req, res, next) => {
if (typeof proxyConfigOrCallback === 'function') {
const newProxyConfig = proxyConfigOrCallback();
if (newProxyConfig !== proxyConfig) {
proxyConfig = newProxyConfig;
proxyMiddleware = getProxyMiddleware(proxyConfig);
}
}
// - Check if we have a bypass function defined
// - In case the bypass function is defined we'll retrieve the
// bypassUrl from it otherwise bypassUrl would be null
const isByPassFuncDefined = typeof proxyConfig.bypass === 'function';
const bypassUrl = isByPassFuncDefined
? proxyConfig.bypass(req, res, proxyConfig)
: null;
if (typeof bypassUrl === 'boolean') {
// skip the proxy
req.url = null;
next();
} else if (typeof bypassUrl === 'string') {
// byPass to that url
req.url = bypassUrl;
next();
} else if (proxyMiddleware) {
return proxyMiddleware(req, res, next);
} else {
next();
}
};
app.use(handle);
// Also forward error requests to the proxy so it can handle them.
app.use((error, req, res, next) => handle(req, res, next));
});
};
module.exports = function addDevMiddlewares(app, webpackConfig) {
const compiler = webpack(webpackConfig);
const middleware = createWebpackMiddleware(
......@@ -27,65 +137,19 @@ module.exports = function addDevMiddlewares(app, webpackConfig) {
// Since webpackDevMiddleware uses memory-fs internally to store build
// artifacts, we use it instead
const fs = middleware.fileSystem;
let proxyHost = process.env.PROXY;
const proxyPrefix = process.env.PROXY_PREFIX || '/Cityinterface';
app.get('/setproxy', (req, res) => {
if (req.query && req.query.host) {
proxyHost = req.query.host;
res.send(200);
} else {
res.send(400);
}
});
if (
proxyHost &&
(proxyHost.toLowerCase() !== 'origin' ||
proxyHost.toLowerCase() !== 'off' ||
proxyHost !== '0')
) {
logger.info(`using proxy at: ${proxyHost}`);
logger.info(`proxy prefix: ${proxyPrefix}`);
app.use(
proxyPrefix,
createProxyMiddleware({
target: proxyHost,
if (process.env.PROXY) {
const proxies = process.env.PROXY.split(';');
// 设置代理
setupProxyFeature(app, {
proxy: proxies.map(proxyStr => {
const mathes = proxyStr.match(/^\s*([/\w]+)\s*:\s*(.+)\s*$/);
return {
path: mathes[1],
target: mathes[2],
changeOrigin: true,
// eslint-disable-next-line no-unused-vars
onProxyReq: (_prexyReq, _req, _res) => {
logger.info('onProxyReq');
},
// eslint-disable-next-line no-unused-vars
onProxyRes(_proxyRes, _req, _res) {
logger.info('onProxyRes');
},
};
}),
);
const proxy2 = process.env.PROXY2;
if (proxy2) {
const reg = /([/\w]+)\s*:\s*([\w:./]*)/;
const match = proxy2.match(reg);
const [, pre, host] = match;
logger.info(`using proxy2 at: ${host}`);
const prefix = `${pre[0] === '/' ? pre : `/${pre}`}`;
logger.info(`proxy2 prefix: ${prefix}`);
app.use(
prefix,
createProxyMiddleware({
target: host,
changeOrigin: true,
// eslint-disable-next-line no-unused-vars
onProxyReq: (_prexyReq, _req, _res) => {
logger.info('onProxyReq2');
},
// eslint-disable-next-line no-unused-vars
onProxyRes(_proxyRes, _req, _res) {
logger.info('onProxyRes2');
},
}),
);
}
});
}
app.get('*', (_req, res) => {
......
src/components/BaseForm/index.js
View file @ bb5f817d
......@@ -70,6 +70,7 @@ const BaseForm = props => {
getForm, // 用来获取表单实例
formProps,
children,
...restProps
} = props;
const [form] = useForm();
......@@ -81,7 +82,7 @@ const BaseForm = props => {
}, []);
return (
<Form size="small" form={form} {...formProps}>
<Form size="small" form={form} {...formProps} {...restProps}>
{items &&
items.map(item => {
const {
......
src/components/Upload/index.tsx
View file @ bb5f817d
......@@ -4,9 +4,10 @@ import { PlusOutlined, CheckCircleFilled } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';
import classnames from 'classnames';
import { UploadFile, UploadChangeParam, RcFile } from 'antd/lib/upload/interface';
import { isDev, unParams, uuid } from '@/utils/tools';
import { get } from '@/services';
import { uuid } from '@/utils/tools';
import { get, PUBLISH_SERVICE } from '@/services';
import styles from './index.less';
import { getImageBases } from '@/services/common/api';
const { TabPane } = Tabs;
......@@ -35,6 +36,7 @@ interface PicturesWallType {
onChange?: (v: any) => void;
cropRate?: number | boolean;
isCrop?: boolean;
type?: 'CityTemp'|'icon'|'androidMenu'|'menuNew'
}
class PicturesWall extends React.Component<PicturesWallType> {
......@@ -43,11 +45,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
previewImage: '',
wallModalVisible: false,
previewTitle: '',
imgBed: {
icon: [],
bg: [],
uploaded: [],
},
imgBed: [],
curSelectedImg: '',
fileList: this.props.fileList || [],
};
......@@ -90,9 +88,9 @@ class PicturesWall extends React.Component<PicturesWallType> {
const fileList = [
{
uid: uuid(8, 16),
name: 'h5-dooring图片库',
name: '熊猫运维中台系统',
status: 'done',
url: this.state.curSelectedImg,
url: this.getImageUrl(this.state.curSelectedImg),
},
];
this.props.onChange && this.props.onChange(fileList);
......@@ -103,11 +101,11 @@ class PicturesWall extends React.Component<PicturesWallType> {
this.setState({ fileList });
if (file.status === 'done') {
const files = fileList.map(item => {
const { uid, name, status } = item;
const url = item.url || item.response.result.url;
return { uid, name, status, url };
const { status, data, name, thumbUrl } = item;
const url = thumbUrl || this.getImageUrl(data);
return { uid: uuid(8, 16), name, status, url };
});
this.props.onChange && this.props.onChange(files);
this.props.onChange && this.props.onChange( this.props.maxLen === 1 ? files[0].url : files.map(f => f.url));
}
};
......@@ -128,12 +126,19 @@ class PicturesWall extends React.Component<PicturesWallType> {
};
componentDidMount() {
get(`/visible/bed/get?tid=${unParams(location.search)!.tid}`).then(res => {
// res &&
// this.setState({
// imgBed: res,
// });
});
const { type = ''} = this.props;
getImageBases(type).then(res => {
if(res.code === 0){
this.setState({imgBed: res.data})
}
})
}
getImageUrl(path){
if(path.indexOf('http') === 0){
return path
}
return `${window.location.origin}/${path}`.replace(/\\/g, '/')
}
render() {
......@@ -147,7 +152,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
curSelectedImg,
} = this.state;
const {
action = isDev ? 'http://192.168.1.8:3000/api/v0/files/upload/free' : '你的服务器地址',
action = `${window.location.origin}${PUBLISH_SERVICE}/FileCenter/UploadSingleFile` ,
headers,
withCredentials = true,
maxLen = 1,
......@@ -162,8 +167,6 @@ class PicturesWall extends React.Component<PicturesWallType> {
</div>
);
const cates = Object.keys(imgBed);
return (
<>
{isCrop ? (
......@@ -178,14 +181,14 @@ class PicturesWall extends React.Component<PicturesWallType> {
fileList={fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
name="file"
name="singleFile"
listType="picture-card"
className={styles.avatarUploader}
action={action}
withCredentials={withCredentials}
headers={{
'x-requested-with': localStorage.getItem('user') || '',
authorization: localStorage.getItem('token') || '',
token: localStorage.getItem('token') || '',
...headers,
}}
beforeUpload={this.handleBeforeUpload}
......@@ -198,14 +201,14 @@ class PicturesWall extends React.Component<PicturesWallType> {
fileList={fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
name="file"
name="singleFile"
listType="picture-card"
className={styles.avatarUploader}
action={action}
withCredentials={withCredentials}
headers={{
'x-requested-with': localStorage.getItem('user') || '',
authorization: localStorage.getItem('token') || '',
token: localStorage.getItem('token') || '',
...headers,
}}
beforeUpload={this.handleBeforeUpload}
......@@ -214,7 +217,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
</Upload>
)}
<div className={styles.wallBtn} onClick={this.handleWallShow}>
图片库
从图片库选择
</div>
<Modal
visible={previewVisible}
......@@ -222,7 +225,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
footer={null}
onCancel={this.handleCancel}
>
<img alt="预览图片" style={{ width: '100%' }} src={previewImage} />
<img alt="预览图片" style={{ width: '100%' }} src={this.getImageUrl(previewImage)} />
</Modal>
<Modal
visible={wallModalVisible}
......@@ -233,13 +236,12 @@ class PicturesWall extends React.Component<PicturesWallType> {
onCancel={this.handleModalCancel}
onOk={this.handleModalOk}
>
<Tabs defaultActiveKey={cates[0]} tabPosition="left" style={{ height: 520 }}>
{cates.map((item, i) => {
<Tabs defaultActiveKey={imgBed[0]?.moduleName} tabPosition="left" style={{ height: 520 }}>
{imgBed.map((item, i) => {
return (
<TabPane tab={wallCateName[item]} key={item}>
<TabPane tab={item.moduleName} key={item.moduleName}>
<div className={styles.imgBox}>
{(imgBed as any)[item] &&
(imgBed as any)[item].map((item: string, i: number) => {
{item.child?.map(m => m.fileUrls).flat(Infinity).map((item: string, i: number) => {
return (
<div
className={classnames(
......@@ -249,7 +251,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
key={i}
onClick={() => this.handleImgSelected(item)}
>
<img src={item} alt="熊猫运维中台系统" />
<img src={this.getImageUrl(item)} alt="熊猫运维中台系统" />
<span className={styles.iconBtn}>
<CheckCircleFilled />
</span>
......
src/pages/webConfig/components/siteConfigDrawer.js
View file @ bb5f817d
......@@ -193,7 +193,12 @@ export default props => {
visible={visible}
maskClosable={false}
>
<BaseForm {...formConfig} />
<BaseForm
{...formConfig}
onFinish={values => {
console.log(values);
}}
/>
</Drawer>
</div>
);
......
src/services/common/api.js 0 → 100644
View file @ bb5f817d
import { post, postForm, get, PUBLISH_SERVICE } from '../index';
export const getImageBases = moduleName =>
get(`${PUBLISH_SERVICE}/FileCenter/GetFileUrls`, { moduleName });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment