Javascript 如何使用react adal而不是Axios将文件从reactjs发布到web api

我需要使用此软件包来使用rest api：

到目前为止，我的代码如下，基本上我已经找到了所有的示例并将它们放在一起，但是const数据的值为tenantid、tenantur和tenantpassword

问题是如何将文件发送到请求中

import React, { Component } from 'react';

import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';

const data = {
  TenantId: this.this.state.tenantid,
  TenanrUrl: this.state.tenanturl,
  TenantPassword: this.state.tenantpassword 
};

const options = {
  method: 'post',
  data: data,
  config: {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
};

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
    this.handleChangeTenantPassword = this.handleChangeTenantPassword.bind(this);
    this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeTenantUrl(event){
    this.setState({tenanturl: event.target.value});
  }

  handleChangeTenantPassword(event){
    this.setState({tenantpassword: event.target.value});
  }

  handleChangeTenantId(event){
    this.setState({tenantid: event.target.value});
  }

  handleSubmit(event){
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
    postData();
  }

  postData = () => {
    adalApiFetch(fetch, "/tenant", options)
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  upload(e){
      let data = new FormData();
      //Append files to form data
      let files = e.target.files;
      for (let i = 0; i < files.length; i++) {
        data.append('files', files[i], files[i].name);
      }      
  }

  render(){
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;

    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={12} sm={12} xs={24} style={colStyle}>
            <Box
              title={<IntlMessages id="pageTitles.TenantAdministration" />}
              subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
            >
              <ContentHolder>
              <form onSubmit={this.handleSubmit}>
                <label>
                  TenantId:
                  <input type="text" value={this.state.tenantid} onChange={this.handleChangeTenantId} />
                </label>
                <label>
                  TenantUrl:
                  <input type="text" value={this.state.tenanturl} onChange={this.handleChangeTenantUrl} />
                </label>
                <label>
                  TenantPassword:
                  <input type="text" value={this.state.tenantpassword} onChange={this.handleChangeTenantPassword} />
                </label>
                <label>
                  Certificate:
                  <input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
                </label>             
              <input type="submit" value="Submit" />
              </form>
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“antd”导入{Row，Col}；
从“../../components/utility/PageHeader”导入PageHeader；
从“../../components/utility/Box”导入框；
从“../../components/utility/LayoutWrapper.js”导入LayoutWrapper；
从“../../components/utility/ContentHolder”导入ContentHolder；
从“../../settings/basicStyle”导入basicStyle；
从“../../components/utility/IntlMessages”导入IntlMessages；
从“../../adalConfig”导入{adalApiFetch}；
常数数据={
特纳蒂德：这个，这个，州，特纳蒂德，
租户：这个。州。租户，
租户密码：this.state.TenantPassword
};
常量选项={
方法：“post”，
数据：数据，
配置：{
标题：{
“内容类型”：“多部分/表单数据”
}
}
};
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handlechangetranturl=this.handlechangetranturl.bind（this）；
this.handlechangetantpassword=this.handlechangetantpassword.bind（this）；
this.handlechangetantid=this.handlechangetantid.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChangeTenantUrl（事件）{
this.setState（{tenanturl:event.target.value}）；
}
handleChangeTenantPassword（事件）{
this.setState（{tenantpassword:event.target.value}）；
}
handlechangetrantid（事件）{
this.setState（{tenantid:event.target.value}）；
}
handleSubmit（事件）{
警报（“已提交名称：”+this.state.value）；
event.preventDefault（）；
postData（）；
}
postData=（）=>{
adalApiFetch（获取“/tenant”，选项）
.then（response=>response.json（））
.然后（responseJson=>{
如果（！this.isCancelled）{
this.setState（{data:responseJson}）；
}
})
.catch（错误=>{
控制台错误（error）；
});
};
上传（e）{
let data=new FormData（）；
//将文件附加到表单数据
让files=e.target.files；
for（设i=0；ithis.fileUpload}/>
);
}
}

问题在于，在定义变量中的任何引用之前，您正在创建

选项

变量。您需要执行以下操作：

import React，{Component}来自'React'；
从“antd”导入{Row，Col}；
从“../../components/utility/PageHeader”导入PageHeader；
从“../../components/utility/Box”导入框；
从“../../components/utility/LayoutWrapper.js”导入LayoutWrapper；
从“../../components/utility/ContentHolder”导入ContentHolder；
从“../../settings/basicStyle”导入basicStyle；
从“../../components/utility/IntlMessages”导入IntlMessages；
从“../../adalConfig”导入{adalApiFetch}；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handlechangetranturl=this.handlechangetranturl.bind（this）；
this.handlechangetantpassword=this.handlechangetantpassword.bind（this）；
this.handlechangetantid=this.handlechangetantid.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChangeTenantUrl（事件）{
this.setState（{tenanturl:event.target.value}）；
}
handleChangeTenantPassword（事件）{
this.setState（{tenantpassword:event.target.value}）；
}
handlechangetrantid（事件）{
this.setState（{tenantid:event.target.value}）；
}
handleSubmit（事件）{
警报（“已提交名称：”+this.state.value）；
event.preventDefault（）；
postData（）；
}
postData=（）=>{
this.data.append（“TenantId”，this.state.TenantId）；
this.data.append（“tenarurl”，this.state.tenatorl）；
this.data.append（“TenantPassword”，this.state.TenantPassword）；
常量选项={
方法：“post”，
数据：这个数据，
配置：{
标题：{
“内容类型”：“多部分/表单数据”
}
}
};
adalApiFetch（选项）
.then（response=>response.json（））
.然后（responseJson=>{
如果（！this.isCancelled）{
this.setState（{data:responseJson}）；
}
})
.catch（错误=>{
控制台错误（error）；
});
};
上传（e）{
this.data=new FormData（）；
让files=e.target.files；
for（设i=0；i