Javascript React中的axios未向Express server发送信息（文件上传）

嗨，我有一个React客户端和一个Express服务器，所以问题是，当我试图将信息从React客户端发送到Express服务器时，它没有到达，我尝试了接近

第一个

没有格式数据

houseService.js

export const addHouse = (House) => {
  axios.post('/api/properties/houses/createHouse', House).then(res => console.log(res.data))
}

export const addHouse = (House) => {
    let data = new FormData()

    for (let key in House) {
        data.append(key, House[key])
    }
    axios.post('/api/properties/houses/createHouse', data, {
        headers: {
            'accept': 'application/json',
            'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
        }
    }).then(res => console.log(res.data))

这会将数据发送到Express服务器，但图像无法到达。
这里是JSON

{ name: 'Nombre Prueba',
  address: 
   { street: 'Calle Prueba',
     ext_number: 1,
     int_number: 1,
     colony: 'Colonia Prueba',
     postal_code: 95264,
     city: 'Ciudad Prueba',
     municipality: 'Municipio Prueba',
     state: 'Estado Prueba',
     location: [ 1, 2 ] },
  characteristics: { room: 1, parking: 1, bathroom: 1, half_bathroom: 1 },
  size: { built: 1, total: 1 },
  services: [ 'Gas' ],
  amenities: [ 'Estudio' ],
  retail: 'Renta',
  antiquity: 1,
  status: 'Terminada',
  user: '5b109656f869730ed45460af',
  photos: [ { file: {} } ] }

this.state = {
      name : 'Nombre Prueba',
      street : 'Calle Prueba',
      ext_number : 1,
      int_number : 1,
      colony : 'Colonia Prueba',
      postal_code : 95264,
      city : 'Ciudad Prueba',
      municipality : 'Municipio Prueba',
      state : 'Estado Prueba',
      location : [1,2],
      room : 1,
      parking : 1,
      bathroom : 1,
      half_bathroom : 1,
      services : ['Gas'],
      amenities : ['Estudio'],
      built : 1,
      total : 1,
      retail : 'Renta',
      antiquity : 1,
      status : 'Terminada',
      user : '5b109656f869730ed45460af',
      photos : [],
      submitted: false,
    };

但是我们可以看到照片是空的，如果我在react客户端打印照片，它将打印对象

第二个

使用FormData

housessservice.js

export const addHouse = (House) => {
  axios.post('/api/properties/houses/createHouse', House).then(res => console.log(res.data))
}

export const addHouse = (House) => {
    let data = new FormData()

    for (let key in House) {
        data.append(key, House[key])
    }
    axios.post('/api/properties/houses/createHouse', data, {
        headers: {
            'accept': 'application/json',
            'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
        }
    }).then(res => console.log(res.data))

在服务器端尝试从中获取数据时，没有显示任何内容，它显示一个空JSON

{ name: 'Nombre Prueba',
  address: 
   { street: 'Calle Prueba',
     ext_number: 1,
     int_number: 1,
     colony: 'Colonia Prueba',
     postal_code: 95264,
     city: 'Ciudad Prueba',
     municipality: 'Municipio Prueba',
     state: 'Estado Prueba',
     location: [ 1, 2 ] },
  characteristics: { room: 1, parking: 1, bathroom: 1, half_bathroom: 1 },
  size: { built: 1, total: 1 },
  services: [ 'Gas' ],
  amenities: [ 'Estudio' ],
  retail: 'Renta',
  antiquity: 1,
  status: 'Terminada',
  user: '5b109656f869730ed45460af',
  photos: [ { file: {} } ] }

this.state = {
      name : 'Nombre Prueba',
      street : 'Calle Prueba',
      ext_number : 1,
      int_number : 1,
      colony : 'Colonia Prueba',
      postal_code : 95264,
      city : 'Ciudad Prueba',
      municipality : 'Municipio Prueba',
      state : 'Estado Prueba',
      location : [1,2],
      room : 1,
      parking : 1,
      bathroom : 1,
      half_bathroom : 1,
      services : ['Gas'],
      amenities : ['Estudio'],
      built : 1,
      total : 1,
      retail : 'Renta',
      antiquity : 1,
      status : 'Terminada',
      user : '5b109656f869730ed45460af',
      photos : [],
      submitted: false,
    };

我上传了一些照片

<div className="field-wrap">
              <input type="file"
              name="photos"
              onChange={this._handleImageChange}
              className={submitted && !photos ?
                  "invalid" : ""
                }
              multiple/>
            </div>

---

我可以在de AXIOS之前使用控制台日志打印照片

在照片阵列上循环并分别附加每张照片。请尝试以下代码：

export const addHouse = House => {
    let data = new FormData();

    for (const key of House) {
        if (key !== 'photos') {
            data.append(key, House[key]);
        }
    }
    for (const photo of House['photos']) {
        data.append('photos', photo);
    }
    axios.post('/api/properties/houses/createHouse', data)
        .then(res => console.log(res.data));
}

---

您将向

House

param中的函数传递什么？@wdm检查，我刚刚编辑过it@joserh94您可以添加创建应用程序的服务器代码吗？您是否配置了中间件（比如

multer

或其他什么）来解析多部分正文内容<代码>正文解析器不处理多部分正文。@YuryTarabanko让我和我的队友再核实一下，明天可能是我的答案，我会核实的，谢谢！我无法使用，所以我在中更改了它，但在浏览器上的inspect>>network中，我想我们正在获取他们未发送的照片，所以我打印了console.log（'photos'，photo），它打印了一个0，所以我尝试了House[photo]，它打印了undefined，还尝试了console.log（'photos'，photo.file）和undefined，console.log（'photos'，photo.name）和undefined@wdm此代码假定上载时您的照片存储在

this.state.photos

中，并且您正在将

状态作为您的
House
函数的
param传递。我有一个类似的设置在一个实时应用程序中工作，所以请仔细检查以确保。谢谢，让我检查一下，我可能明天必须检查它，虽然，这里有点晚，是不是addHouse正在用减速机进行呼叫，而不是在该州的react？我将状态发送到一个reducer文件，并在其中调用函数