Javascript 使用axios从react native将文件上载到rails 6 api后端

我想使用axios将带有数据的图像上传到rails 6 api。我尝试使用formdata，但得到一个

ActiveSupport:：MessageVerifier:：InvalidSignature

错误。这是我的密码：

uploadToServer=（）=>{
const file=this.state.photo
设formdata=new formdata（）
formdata.append（'name'，this.state.name）
formdata.append（'photo'，文件）
轴心柱(
"空气污染指数",，
formdata，
{
标题：{
“内容类型”：“多部分/表单数据”，
“授权”：“xx”
}
}
).then（resp=>console.log（resp））.catch（error=>console.error（error））；
}

这是我收到的错误：

在171ms内完成500个内部服务器错误（ActiveRecord:46.0ms |分配：32866）
ActiveSupport:：MessageVerifier:：InvalidSignature（ActiveSupport:：MessageVerifier:：InvalidSignature）：

---

非常感谢您的帮助。提前谢谢

我在reactjs中遇到了同样的问题。我认为你的照片文件应该是一个“blob”文件。 我就这样解决了

import Resizer from 'react-image-file-resizer';

imageInputHandler = (event) =>{
    var fileInput = false
    if(event.target.files[0]) {
        fileInput = true
    }
    if(fileInput) {
        Resizer.imageFileResizer(
            event.target.files[0],
            800,
            800,
            'JPEG',
            100,
            0,
            uri => {
                console.log("ok....resized")
                this.setState({
                  file: uri
                })
            },
            'blob',
            200,
            200,
        );
    }   
  }

 const formData = new FormData();
  formData.append('text', self.state.text);
  formData.append('user_id', self.props.user_id);
  formData.append('image', self.state.image);
  fetch('http://localhost:3000/posts/create', {
    method: 'POST',
    body: formData
  })

然后用

fetch（）

将参数发送到Rails API，如下所示

import Resizer from 'react-image-file-resizer';

imageInputHandler = (event) =>{
    var fileInput = false
    if(event.target.files[0]) {
        fileInput = true
    }
    if(fileInput) {
        Resizer.imageFileResizer(
            event.target.files[0],
            800,
            800,
            'JPEG',
            100,
            0,
            uri => {
                console.log("ok....resized")
                this.setState({
                  file: uri
                })
            },
            'blob',
            200,
            200,
        );
    }   
  }

 const formData = new FormData();
  formData.append('text', self.state.text);
  formData.append('user_id', self.props.user_id);
  formData.append('image', self.state.image);
  fetch('http://localhost:3000/posts/create', {
    method: 'POST',
    body: formData
  })

但是当然不是在同一个事件处理程序中，因为状态还不会被更新，而且是有效的。出于某种原因，我也无法使用axios来完成

别忘了在Rails控制器中允许参数

  def create
    @post=Post.create(post_params)
    image_url=rails_blob_path(@post.image , only_path: true) if @post.image.attached?
    render json: {text: @post.text, image: image_url, user_id: @post.user_id, id:@post.id }
  end
  
  private
  def post_params
      params.permit( :text, :user_id, :image )
  end

---

我在reactjs中也有同样的问题。我认为你的照片文件应该是一个“blob”文件。 我就这样解决了

import Resizer from 'react-image-file-resizer';

imageInputHandler = (event) =>{
    var fileInput = false
    if(event.target.files[0]) {
        fileInput = true
    }
    if(fileInput) {
        Resizer.imageFileResizer(
            event.target.files[0],
            800,
            800,
            'JPEG',
            100,
            0,
            uri => {
                console.log("ok....resized")
                this.setState({
                  file: uri
                })
            },
            'blob',
            200,
            200,
        );
    }   
  }

 const formData = new FormData();
  formData.append('text', self.state.text);
  formData.append('user_id', self.props.user_id);
  formData.append('image', self.state.image);
  fetch('http://localhost:3000/posts/create', {
    method: 'POST',
    body: formData
  })

然后用

fetch（）

将参数发送到Rails API，如下所示

import Resizer from 'react-image-file-resizer';

imageInputHandler = (event) =>{
    var fileInput = false
    if(event.target.files[0]) {
        fileInput = true
    }
    if(fileInput) {
        Resizer.imageFileResizer(
            event.target.files[0],
            800,
            800,
            'JPEG',
            100,
            0,
            uri => {
                console.log("ok....resized")
                this.setState({
                  file: uri
                })
            },
            'blob',
            200,
            200,
        );
    }   
  }

 const formData = new FormData();
  formData.append('text', self.state.text);
  formData.append('user_id', self.props.user_id);
  formData.append('image', self.state.image);
  fetch('http://localhost:3000/posts/create', {
    method: 'POST',
    body: formData
  })

但是当然不是在同一个事件处理程序中，因为状态还不会被更新，而且是有效的。出于某种原因，我也无法使用axios来完成

别忘了在Rails控制器中允许参数

  def create
    @post=Post.create(post_params)
    image_url=rails_blob_path(@post.image , only_path: true) if @post.image.attached?
    render json: {text: @post.text, image: image_url, user_id: @post.user_id, id:@post.id }
  end
  
  private
  def post_params
      params.permit( :text, :user_id, :image )
  end

---

这可能会有所帮助。不要设置内容类型，这可能会有所帮助。不要设置内容类型