Question

嗨，我有一个React客户端和一个Express Server，所以问题在于，当我尝试将信息从React客户端发送到Express Server时，它没有到达，因此我尝试进行分配。

第一个

没有FormData。

houseService.js

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

这会将数据发送到Express Server，但是图像无法到达。
这里是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: {} } ] }

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

第二个

使用FormData

housesService.js

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。

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之前使用控制台日志打印照片

Answer 1

将照片放在数组上，然后分别附加每张照片。尝试以下代码：

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

React中的axios不会将信息发送到Express服务器（文件更新）

1 个答案: