我正在使用 ReactJS 开发项目,目前我正在使用 ant-design 进行文件上传。我想在用户选择视频时预览视频。我是 reactjs 新手,无法完成我的任务。有人可以帮助我如何预览视频。我将与您分享我的代码您可以检查我的代码。谢谢
代码
import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import './styletwo.css';
import { Form, Upload, Button, Icon } from 'antd';
// import reqwest from 'reqwest';
const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const PhotoText = styled.div`
font-size: 16px;
font-weight: bold;
padding: 2rem 0 1rem 0;
display: block;
text-align: -webkit-auto;
`;
const props = {
action: '',
listType: 'picture',
};
class RegisterStepTwo extends React.Component {
render() {
const { getFieldDecorator } = this.props;
return (
<div>
<PhotoText>Select a Photo to Upload</PhotoText>
<FormItem>
{getFieldDecorator('picture', {
rules: [
{
required: true,
message: 'Please upload picture!',
},
],
})(
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<Icon type="upload" />
</p>
<p className="ant-upload-text">
Click or drag photo to this area to upload
</p>
</Dragger>,
)}
</FormItem>
<PhotoText>Select a Video to Upload</PhotoText>
<FormItem>
{getFieldDecorator('video', {
rules: [
{
required: true,
message: 'Please upload video!',
},
],
})(
<Dragger>
<p className="ant-upload-drag-icon">
<Icon type="upload" />
</p>
<p className="ant-upload-text">
Click or drag Video to this area to upload
</p>
</Dragger>,
)}
</FormItem>
</div>
);
}
}
export default RegisterStepTwo;