html.js

class HtmlField extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      html: this.props.html,
      validateResult: true,
      validateStatus: "",
      up_token: "",
      up_file_key: ""
    };
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
  }

  render() {
    const self = this;
    const uploadProps = {
      name: 'file',
      multiple: true,
      action: 'http://upload.qiniu.com/',
      headers: {
        authorization: '',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file.status);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
      data(file){
          return {
              token: self.state.up_token,
              key: self.state.up_file_key,
              file:file
          }
      },
      beforeUpload(file, fileList){
          console.log(file, fileList);
          return request(`/api/site/${self.props.site_key}/uptoken`, { method:'POST', body: JSON.stringify({file_key: file.name})}).then(data=>{
              self.setState({up_token: data.data.up_token, up_file_key: `up_img/${file.name}`})
          });
      }
    };


    return (
      <FormItem
      label={ this.props.label }
      validateStatus={ this.state.validateStatus }
      help={ this.state.validateResult }
    >
      <LzEditor
          active={true}
          importContent={this.state.html}
          cbReceiver={this.handleChange}
          uploadProps={uploadProps}
          image={true}
          video={false}
          audio={false}
          autoSave={false}
      />
    </FormItem>
    )
  }
}
export default HtmlField;