主动存储和从React上传图像

如何解决主动存储和从React上传图像

在包含文件时，我无法从React创建发布请求。我试图通过排除.require（：user）将强参数转换为非强参数。通过这样做，我能够创建一个发布请求，但是该图像没有在我的localhost：3000 / users中返回带有URL的信息。完全没有文件，发布请求可以正常工作。有了它和强大的参数，我得到了400错误的请求错误，其值为param is missing or the value is empty: user。

我在提取请求中的代码是：

import React from 'react'
import {connect} from 'react-redux'
import {fetchUser} from '../actions'
import WelcomePage from './WelcomePage'

class Signup extends React.Component{

    state = {
        user: {
            username: '',password: '',pro_pic: null,currentUser: false
        }    
    }

    handleChange = e => {
        this.setState({user: {
            ...this.state.user,[e.target.name]: e.target.value
        }})
    }

    onImageChange = event => { 
        this.setState({user: {
            ...this.state.user,pro_pic: event.target.files[0] }
        });
    };

    handleSubmit = e => {
        e.preventDefault()
        const formData = new FormData()
        formData.append('username',this.state.user.username);
        formData.append('password',this.state.user.password);
        formData.append('pro_pic',this.state.user.pro_pic);
        this.setState(previousState => {
            return {
                currentUser: !previousState.currentUser
            }
        })
        fetch('http://localhost:3000/users',{
            method: 'POST',body: ({user: formData})
            })
            .then(response => response.json())
            .then(console.log)
            .catch(error=>console.log(error))
    }

    render(){
        return(
            <div>
                {this.state.currentUser ? 
                    <WelcomePage/> 
                : 
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" name="username" placeholder="IGN or Username" value={this.state.username} onChange={this.handleChange}/>
                        <input type="password" name="password" placeholder="Create Password" value={this.state.password} onChange={this.handleChange}/>
                        <input type="file" accept="image/*" multiple={false} onChange={this.onImageChange} />
                        <input type="submit" value="Create Account"/>
                    </form>
                }
            </div>
        )
    }
}

export default connect(null,{fetchUser})(Signup)

我的用户控制器如下：

class UsersController < ApplicationController

    def index
        @users = User.all
        render json: @users
    end

    def show
        @user = User.find(params[:id])
        render json: @user
    end

    def create
        @user = User.create(user_params)
        if @user.valid?
            render json: @user
        end
    end

    private

    def user_params
        params.require(:user).permit(:username,:password,:pro_pic)
    end
end

我的用户序列化器如下：

class UserSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers
  attributes :id,:username,:pro_pic

  def featured_image
    if object.pro_pic.attached?
      {
        url: rails_blob_url(object.pro_pic)
      }
    end
  end
end

我在用户模型中加入了has_one_attached :pro_pic。

编辑：localhost：3000 / users中出现的内容如下：

{
"id": 3,"username": "asdfsdf","password": "zJMFhbSz@DuB74N","pro_pic": {
"name": "pro_pic","record": {
"id": 3,"created_at": "2020-08-28T14:54:28.845Z","updated_at": "2020-08-28T14:54:28.864Z"
}
}
},

解决方法

尝试

<form onSubmit={this.handleSubmit} enctype="multipart/form-data">