0%

antd upload代理异常解决方案

这两天在写个平台,需要用到是上传附件,本来很简单的事,愣是让roadhogrc的坑给坑了1天。

一开始用的rodhogrc代理去mock数据,后来改成代理到后端那边,确怎么都取不到数据。日了狗了,写法是复制我另一个线上项目的。
最终发现是roadhogrc本身的坑。

先看下上传代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.
.
.
uploadSuccess = (ret, file) => {
if (ret.code === '00') {
message.success(file.name + ' 上传成功');
this.props.dispatch({
type: 'caseManage/fetchCaseInfo',
payload: {
caseId: this.state.selectedKey,
},
});
} else {
message.error(file.name + ret.msg);
}
};
.
.
.
const uploadProps = {
name: 'files',
action: '/case/uploadFiles/' + this.state.selectedKey,
accept: 'image/jpg,image/jpeg,image/png,image/bmp,.pdf,.doc,.docx,.xls,.xlsx',
multiple: true,
onStart(file) {
console.log('onStart', file, file.name);
},
onError(err) {
console.log('onError', err);
},
onProgress({ percent }, file) {
console.log('onProgress', `${percent}%`, file.name);
},
};
.
.
.
<Upload {...uploadProps} onSuccess={this.uploadSuccess}>
<Tooltip
placement="right"
title="允许的类型: jpg,jpeg,png,pdf,doc,docx,xls,xlsx"
>
<Button size="small">
<Icon type="upload" />选择文件
</Button>
</Tooltip>
</Upload>
.
.
.

这种方式可以保证上传成功后,界面能后刷新最新的fetchCaseInfo接口数据。且可以自定义我的附件列表。
回调要这么写,不然又是一堆代理异常。

1
onSuccess={this.uploadSuccess}

看下最坑的,把roadhogrc关掉,设置下.webpackrc.js

1
2
3
4
5
6
7
proxy: {
'/': {
target: 'http://127.0.0.1:6005/',
changeOrigin: true,
pathRewrite: { '^/': '' },
},
},