在 ReactJs 中验证文件上传
Validate File Upload in ReactJs
我是 Brad,我是 ReactJS 的新手,目前我正在研究 ant-design 表单。我想验证空文件输入字段的输入文件验证并显示消息 "please attach a file",我无法为此模块编写代码请帮助我,我很困惑
我的表单代码
import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import { Upload, message, Button, Icon } from 'antd';
const PhotoText = styled.div`
font-size: 16px;
font-weight: bold;
padding: 2rem 0 1rem 0;
display: block;
text-align: -webkit-auto;
`;
const ButtonWrapper = styled.div`
text-align: center;
`;
let file = { id: 'test' };
const { propss } = {
name: 'file',
action: '//jsonplaceholder.typicode.com/posts/',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
file = info.file;
if (info.file.status !== 'uploading') {
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
file = info.file;
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
class RegisterStepTwo extends React.Component {
constructor(props) {
super(props);
this.saveData = this.saveData.bind(this);
}
saveData(e) {
this.props.addData(e, file);
}
render() {
return (
<div>
<PhotoText>Select a Photo to Upload</PhotoText>
<Upload {...propss}>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
<br />
<PhotoText>Select a Video to Upload</PhotoText>
<Upload {...propss}>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
</div>
);
}
}
export default RegisterStepTwo;
您似乎在寻找 beforeUpload 函数(向下滚动一点)。
将该函数添加到 props 并检查其中的表单内容(验证它)。根据文档,returning false 应该会停止上传。
编辑:
我真的不应该为你写代码。无论如何,这样的事情应该有效:
const { propss } = {
...code you've got so far,
beforeUpdate(file) {
if (file === '') {
message.error('your error message');
return false;
}
}
};
There is an an example - 单击 < >
符号查看代码。
在上传函数接受文件参数之前,将其添加到列表中,并且 returns 为 false,从而阻止上传。用户需要按下按钮才能这样做。
您应该改为检查变量(如果它不为空),显示一条消息 (message.error()) 和 return false.
我是 Brad,我是 ReactJS 的新手,目前我正在研究 ant-design 表单。我想验证空文件输入字段的输入文件验证并显示消息 "please attach a file",我无法为此模块编写代码请帮助我,我很困惑
我的表单代码
import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import { Upload, message, Button, Icon } from 'antd';
const PhotoText = styled.div`
font-size: 16px;
font-weight: bold;
padding: 2rem 0 1rem 0;
display: block;
text-align: -webkit-auto;
`;
const ButtonWrapper = styled.div`
text-align: center;
`;
let file = { id: 'test' };
const { propss } = {
name: 'file',
action: '//jsonplaceholder.typicode.com/posts/',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
file = info.file;
if (info.file.status !== 'uploading') {
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
file = info.file;
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
class RegisterStepTwo extends React.Component {
constructor(props) {
super(props);
this.saveData = this.saveData.bind(this);
}
saveData(e) {
this.props.addData(e, file);
}
render() {
return (
<div>
<PhotoText>Select a Photo to Upload</PhotoText>
<Upload {...propss}>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
<br />
<PhotoText>Select a Video to Upload</PhotoText>
<Upload {...propss}>
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
</div>
);
}
}
export default RegisterStepTwo;
您似乎在寻找 beforeUpload 函数(向下滚动一点)。
将该函数添加到 props 并检查其中的表单内容(验证它)。根据文档,returning false 应该会停止上传。
编辑: 我真的不应该为你写代码。无论如何,这样的事情应该有效:
const { propss } = {
...code you've got so far,
beforeUpdate(file) {
if (file === '') {
message.error('your error message');
return false;
}
}
};
There is an an example - 单击 < >
符号查看代码。
在上传函数接受文件参数之前,将其添加到列表中,并且 returns 为 false,从而阻止上传。用户需要按下按钮才能这样做。
您应该改为检查变量(如果它不为空),显示一条消息 (message.error()) 和 return false.