使用Redux表单上传文件

时间:2019-02-06 13:25:49

标签: javascript reactjs file-upload

如何以redux形式向文件添加值?

我尝试输入onchange的方法,但总是给我空对象或空数组。给我解释一下如何创建适当的文件输入组件?

我应该使用文件阅读器更改为base64吗?

有什么例子可以给我吗?

import React from 'react'
import TextField from '@material-ui/core/TextField';
import { DropzoneArea } from 'material-ui-dropzone'
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';

export default class FileInput extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      files: []
    };
  }

  handleChange(files){
    this.setState({
      files: files
    });
    // console.log(files)
    // window.hahah = files[0].name
    // let formData = new FormData();
    // formData.append('myFile', files[0]);
    this.props.input.onChange(files.target.files)
  }

  render() {
    let { input, meta: { touched, error }, ...others } = this.props;
    let idProps = Math.random().toString(36).substring(7)+this.props.name;
    if(this.props.meta.error === 'Required') others.label = this.props.label+' (*)'
    var type = "text"
    if(this.props.type) this.props.type
    var label = this.props.label
    return (
      <div className={this.props.className} id={idProps}>
        <FormControl style={{width: '100%'}}>
            <InputLabel>{label}
            {touched && !!error &&
              <FormHelperText>{error}</FormHelperText>
            }
            </InputLabel>
            <br />
            <br />
            <br />
            <br />
            <input type="file" onChange={this.handleChange.bind(this)} />
            {/* <DropzoneArea 
              filesLimit={99}
              onChange={this.handleChange.bind(this)}
              showAlerts={false}
              showPreviewsInDropzone={true}
              dropzoneText={false}
            /> */}
        </FormControl>
      </div>
    )
  }
}

0 个答案:

没有答案