Question

这可能是一个基本问题，但我无法在任何地方找到解决方案，所以希望它对其他人有所帮助。

我创建了一个React.js应用程序，我想用它将文件上传到我正在使用webpack运行的开发服务器。当我尝试将文件“发布”到此服务器时（使用反应组件superagent），我收到以下错误“http://localhost:8080/upload错误404（未找到）”。

如果我在浏览器窗口中导航到此地址，我会看到服务器上存在该文件夹。另外，我将文件信息记录到控制台，因此我知道我的应用程序正在接收此信息。

我的项目设置如下：

/app/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Highcharts Testing</title>
</head>
<body>
  <div id="dropzone"></div>
</body>
</html>

/app/main.js

var React = require('react');
var Dropzone = require('react-dropzone');
var request = require('superagent');
var ReactDOM = require('react-dom');

var PicDropzone = React.createClass({
  render: function() {
    return (
      <Dropzone onDrop={this.dropHandler}>
        < div > Drop a photo, or click to add. < /div >
      </Dropzone>
    );
  },
  dropHandler: function(acceptedFiles) {
    //var photo = new FormData();
    //photo.append('photo', file[0]);
    console.log(acceptedFiles);
    request.post('/upload')
    //.send(photo)
    .end(function(err, resp) {
      if (err) { console.error(err); }
      return resp;
    });
  }
});

ReactDOM.render(<PicDropzone />, document.getElementById('dropzone'));

/package.json

{
  "name": "dropzone",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "multer": "^1.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-dropzone": "^3.8.0",
    "superagent": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-react": "^6.16.0",
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

/webpack.config.js

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry:[
    __dirname + '/app/main.js'
  ]
  ,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  output: {
    filename: 'transformed.js',
    path: __dirname + '/build'
  },
  plugins: [HTMLWebpackPluginConfig]
};

在我的根文件夹中，我还有上传文件夹，包含已翻译的jsx的文件夹，节点模块和babel配置。我是否需要以某种方式允许我的应用程序在配置文件中的某个位置访问http://localhost:8080/upload？我猜我在设置中遗漏了一些东西，但我无法弄清楚那是什么。

无法使用superagent将文件发布到服务器

0 个答案: