带有axios的反应文件上传超时，未传递图像文件

Question

我在这里肯定缺少一些简单的东西，但是据我所知，我正在做与发现的无数示例相同的事情。我只是想将图像文件从我的React客户端通过axios传递到我的Node服务器。当前，请求只是挂起直到超时。

反应成分：

import React, { Component } from 'react'
import axios from 'axios';

class ImageCreate extends Component {

  constructor(props) {
    super(props);
    this.state = {image:'', notes: ''};
    this.onChange = this.onChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  onChange(e) {
    switch (e.target.name) {
      case 'image':
        this.setState({ image: e.target.files[0] });
        break;
      default:
        this.setState({ [e.target.name]: e.target.value });
    }
  }

  submit(e) {
    e.preventDefault();

    let formData = new FormData();
    formData.append('image', this.state.image);

    axios({method: 'post', url: '/api/assets/image', data: formData, contentType: 'multipart/form-data' })
    .catch(err => { console.log(err); })
  }

  render() {
    return (
      <form encType="multipart/form-data" onSubmit={this.submit}>
        <label>Upload an image
            <br/><br/>
            <input type="text" name="notes" placeholder="notes" value={this.state.value} onChange={this.onChange}/>           
        </label>
        <div className="custom-file">
          <br/>
          <input type="file" name="image" onChange={this.onChange}/>

        </div>
        <br/>
        <input type="submit" value="Upload"/>
      </form>
    )
  }
}

export default ImageCreate

然后我的服务器上的端点在下面。我们在express.Router模块assets.js中，我可以在此模块中完成其他API调用：

// POST api/assets/image
router.post('/image', upload.single('image'), (req, res) => {
    res.send(console.log(req.body));
});

从submit功能中，如果我是console.log(this.state.image)，则文件正确显示。如果在console.log(JSON.stringify(formData))之后我append（我只是得到{}），我看不到该文件，但是从我收集到的信息来看，似乎无法以这种方式记录FormData。如果我错了，请纠正我。

Answer 1

您无法控制台记录Formdata，可以通过以下方式尝试此代码：修改您的提交功能。

async submit(e) {
    e.preventDefault();

    let formData = new FormData();
    await formData.append('image', this.state.image, this.state.image.name)

    // Add your url ex :http://localhost:5000/api/assets/image
    axios.post("/api/assets/image",
        formData, { 'content-type': 'application/x-www-form-urlencoded' })
        .then(results => {
            console.log('Results :', results);
        })
        .catch(err => {
            console.log(err);
        });
}