使用React和Rails上传图片

Question

我正在尝试使用react将图像上传到Rails主动存储中。 我的组件是：

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import User from './../../Assets/user.png';
import { addAvatar } from './../../actions/userAction';

class UploadAvatar extends Component {
  state = {
    image: null,
  };

  fileSelectHandler = (e) => {
    this.setState({
      image: e.target.files[0],
    });
  };

  fileUploadHandler = () => {
    if (this.state.image) {
      console.log(this.state.image, this.props.userId);
      const fd = new FormData();
      fd.append('avatar', this.state.image, this.state.image.name);
      this.props.addAvatar({ avatar: fd, userId: this.props.userId });
    }
  };

  render() {
    return (
      <div className="avatar ">
        <div className="avatar-content shadow-lg">
          <div className="avatar-pic">
            <img src={User} alt="userpic" />
          </div>
          <p>ADD PHOTO</p>
          <input type="file" onChange={this.fileSelectHandler} />
          <div className="avatar-foot">
            <button type="button" className="skip">
              SKIP
            </button>
            <button type="button" onClick={this.fileUploadHandler} className="submit">
              SUBMIT
            </button>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = store => ({
  userId: store.userReducer.userId,
  userEmail: store.userReducer.userEmail,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      addAvatar,
    },
    dispatch,
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(UploadAvatar);

我的ajax.js：

/* eslint-disable no-console no-param-reassign */
let CLIENT_URL = 'http://localhost:3000/api/v1';

function getDefaultOptions() {
  return {
    method: 'GET',
    // credentials: "include",
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
  };
}

function buildParam(params, asJSON = true) {
  if (asJSON) {
    return JSON.stringify(params);
  }
  const fD = new FormData();
  Object.keys(params).forEach((param) => {
    fD.append(param, params[param]);
  });

  return fD;
}

function ajax(uri, options = {}) {
  const defaultOptions = getDefaultOptions();

  options.method = options.method ? options.method : defaultOptions.method;

  if (!options.formType) {
    options.headers = options.headers ? options.headers : defaultOptions.headers;
  }

  options.credentials = options.credentials ? options.credentials : defaultOptions.credentials;

  if (options.body && !options.formType) {
    options.body = buildParam(options.body);
  }

  uri = uri.startsWith('/') ? uri : `/${uri}`;
  return fetch(`${CLIENT_URL}${uri}`, options)
    .then(data => data.json())
    .catch(errors => console.log(errors));
}

export default ajax;

但是在铁轨侧，我在化身中得到了空物体。不知道为什么吗 请看一下Rails的屏幕截图。

但是如果我要上载，请从邮递员那里进行操作。 是否有其他上传图片的方法。