如何将文件从客户端发送到 http 节点服务器答案

【问题标题】：How to send files from client to http node server如何将文件从客户端发送到 http 节点服务器
【发布时间】：2019-08-12 22:04:01
【问题描述】：

我正在尝试将文件从 javascript 文件（客户端）发送到节点服务器。服务器正在接收请求，但是当我 console.log(request.body) 它返回未定义。我不知道为什么当我将文件发布到服务器时，它没有附加到 request.body 上。有谁知道我做错了什么？

client.js（在浏览器中运行的javascript）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dropzone from 'react-dropzone';

const request = require('request')


class App extends Component {

  onDrop = (acceptedFiles) => {
    request.post('http://localhost:8088', {
      file: acceptedFiles[0]
    }, (error, res, body) => {
      if (error) {
        console.error(error);
        return
      }
      console.log(`statusCode: ${request.statusCode}`);
      console.log(body);
    })
  }

  render() {
    return (
      <Dropzone onDrop={this.onDrop}>
        {({getRootProps, getInputProps, isDragActive}) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            {isDragActive ? "Upload file" : 'Click me or drag a file to upload!'}
          </div>
        )}
      </Dropzone>
    );
  }
}

export default App;
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

server.js（节点服务器）

const http = require('http');
var fs = require("fs");

const hostname = '127.0.0.1';
const port = 8088;

const server = http.createServer((request, response) => {
    console.log(request.body);
    if (request.method == 'POST') {
      console.log('POST');
    }
    else {
      console.log('GET');
      response.statusCode = 200;
      response.setHeader('Content-type', 'text/plain');
      response.end('Node server');
    }
});

server.listen(port, hostname, () => {
    console.log('Server started on port ' + port);
});

【问题讨论】：

@Alphastrick — request 是它的包装器
您需要使用 FormData 和 multer 之类的东西将文件发送到节点。
没有request.file 这样的东西。如果你发明了属性，它们很可能不存在
我在控制台中不断收到此错误Access to XMLHttpRequest at 'http://localhost:8088/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
你必须允许来自你的服务器的cors

标签： javascript node.js reactjs http post

【解决方案1】：

您可以使用 Filepond JavaScript 文件上传库。查看它的文档https://github.com/pqina/filepond

【讨论】：

【解决方案2】：

您可以使用以下代码将数据从客户端发送到服务器。我使用了 fetch，因为它内置在 javascript 中，因此不需要任何第三方模块来进行 ajax 调用

 onDrop = (acceptedFiles) => {
  fetch('http://localhost:8088', {
      method: "POST",
      body: this.getFormData({
          file:acceptedFiles[0]
      })
    })
      .then(response => response.json())
      .then(response => {
       // you will get response here 
 });
}

getFormData(object = {}) {
    const formData = new FormData();
    Object.entries(object).forEach(([key, value]) =>
      formData.append(key, value)
    );
    return formData;
}

【讨论】：