使用reactjs上传图像，不将图像路径保存在数据库中

Question

我在后端使用Rails API，在前端使用ReactJS。我也使用载波在后端处理我的图像。我试图上传我的图像并将其发送到后端。使用简单的超文本标记语言上传器在前端捕获图像文件。

这是我的uploader.jsx

import React from 'react'
import axios, { post } from 'axios';
import { PORT } from '../constant.js';


class PrescriptionNew extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file: null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }

  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then(response => {
      console.log('response', response.data)
    })
  }

  onChange(e) {
    this.setState({file: e.target.files[0]})
  }

  fileUpload(file){ 
    const url = `${PORT}/prescriptions`;
    var FormData = require('form-data');
    const formData = new FormData();
    formData.append('file',file)
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }
    return post(url,formData, config)
  }
  
  render() {
    if (this.state.file !== null) {
      console.log('this.file', this.state.file.name)
    }
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}

export default PrescriptionNew;

以上代码是此解决方案的精确副本。我使用formData和axios将数据推送到后端。但数据在数据库中存储为“nil”值。安慰log（formData）给出一个空哈希。

我在后端的控制器代码是

def create
  @prescription = Prescription.new(prescription_params)
  @prescription.user = current_user
  unless @prescription.save
    render json: { status: 200, errors: @prescription.errors } and return
  else
    render :show
  end
end

我还参考了此门户中给出的许多解决方案。但是，我仍然无法研究代码中的错误。

Answer 1

简单的解决方案是填充FormData。返回空FormData将在数据库中存储“nil”值。

完美的音乐是

class PrescriptionNew extends Component {

  upload_image(){
    var element = document.getElementById("image-form")
    var formData =  new FormData(element);
    const url = `${PORT}/prescriptions`
    fetch(url,{
      method: "POST",
      body: formData
    })
    .then(response => response.json)
  }

  after_submit(event){
    event.preventDefault();
  }

  render(){
    return(
      <div>
        <h3 className="index-title">Upload Your Prescription</h3>
        <form onSubmit={event => this.after_submit(event)} id="image-form" encType='multipart/form-data'>
          <input type="file" name="image_path"/>
          <button onClick={() => this.upload_image()}>Upload</button>
        </form>  
      </div>
    )
  }
}

export default PrescriptionNew;