无法使用formdata将文件发送到rails后端的ruby

Question

我的反应应用程序中有这段代码：

this.handlefileupload = (e) => {



console.log(e.target.files[0])
 var formdata = new FormData()
      


      formdata.append('file', e.target.files[0])

   

      axios.post('http://localhost:3000/api/v1/upload_document', {
        myfile: formdata
      }, {
          headers: {
            Authorization: "Bearer " + sessionStorage.getItem('loginToken'),
            'Content-Type': 'multipart/form-data'
          }
        }
      )
        .then((response) => {
          console.log('success')

        }

        )
        .catch(function (error) {
          console.log(error.response);
        });
    }

然后我的 Ruby on Rails 应用程序中有以下内容：

def upload
   uploaded_io = params[:myfile][:file]
   File.open(Rails.root.join('public', 'uploads', uploaded_io.original_filename), 'wb') do |file|
     file.write(uploaded_io.read)
   end
end

我收到以下错误：

在 6 毫秒内完成 500 次内部服务器错误（ActiveRecord：1.0 毫秒）

NoMethodError（nil:NilClass 的未定义方法 `[]'）：

很可能是因为它没有收到文件？

Answer 1

您在后端的参数params[:files][:file]

但你是从 react 以params[:file] 发送的

将反应代码更改为 formdata.append('files[file]', e.target.files[0])

另外，请确保 URL 有效！

const formData = new FormData();
const headers = {
  'Authorization': "Bearer " + sessionStorage.getItem('loginToken'),
  'Accept': 'application/json',
  'Content-Type': 'multipart/form-data'
}

formdata.append('files[file]', e.target.files[0])
axios.post("http://localhost:3000/api/v1/upload_document", formData, {headers})