javascript - 如何从客户端发送文件到http Node 服务器

标签 javascript node.js reactjs http post

我正在尝试将文件从 javascript 文件(客户端)发送到 Node 服务器。服务器正在接收请求,但是当我 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( Node 服务器)

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);
});

最佳答案

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

关于javascript - 如何从客户端发送文件到http Node 服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57459765/

相关文章:

javascript - 我应该在我的 UI 组件库中的什么地方包含 React 作为依赖项?

javascript - 如何拼接嵌套 JSON 的每个第 0 个索引特定键 "logic"和值?

javascript - 为什么我不能在 jQuery 中解析 A​​jax html GET 响应?

javascript - 无法通过循环 Javascript 数组将新列附加到现有表

javascript - 添加 : RangeError: Maximum call stack size exceeded 之前填充

javascript - 如何在加载此 React 组件时触发此函数,而不需要单击按钮?

javascript - 从具有不同域的 iframe 内部进行 AJAX 调用

JavaScript 静态变量

node.js - nodejs child_process.spawnSync 或 child_process.spawn 包裹在返回输出的可屈服生成器中

node.js - 使用 NodeJS 开发 lambdas 时,aws-sdk 可以成为开发依赖项吗?