使用react和node同时上传文件（图片）和数据答案

【问题标题】：Upload file (image) and data at the same time with react and node使用react和node同时上传文件（图片）和数据
【发布时间】：2020-08-04 03:06:40
【问题描述】：

我目前正在使用对服务器的两次调用上传图像和数据，我想将其减少到对服务器的一次调用。

我目前的前端代码如下。输入字段是：

<input
    required
    type="file"
    onChange={this.fileUploaded}
/>

使用此代码上传到状态：

    userEvent.image = new FormData()
    userEvent.image.append('file', e.target.files[0])
    this.setState({ userEvent })

使用此代码发送到后端：

let data = this.state.userEvent.image
let eventData = this.state.userEvent
eventData.token = localStorage.getItem("token")
axios.post(`${process.env.REACT_APP_API}/image`, data)
    .then(res => {
        axios.patch(`${process.env.REACT_APP_API}/events/${res.data._id}`, eventData)
        .then(res => {console.log(res)})
        .catch(err =>{console.log(err)})
        })

        .catch(err => {
        console.log("imgerr", err)
    })

我的后端代码（第一次调用服务器）是：

const Event = require('../models/events')

module.exports = (req, res) => {


let apiUrl = req.protocol + '://' + req.get('host') + '/'

let newEvent = {

    imageURL: apiUrl + req.file.filename,

 }

    Event.create(newEvent)
    .then(data => {
        console.log('data', data)
        res.send(data)
    })
    .catch(err => console.log(err))

}

当我尝试在一个对象中发送图像和数据时，我在后端收到一个错误，因为我执行此操作时 req.file 未定义。

我错过了什么？

【问题讨论】：

您使用的是快递吗？如果是这样，您是否使用body-parser？

标签： node.js reactjs file-upload

【解决方案1】：

我想通了。

我将我保存的其他数据附加到我还想发送到后端的状态中。

对象数组需要被字符串化。

let userEvent = this.state.userEvent
console.log('userEvent.ticekts',    userEvent.tickets);
let data = userEvent.image
data.append('title', userEvent.title)
data.append('venue', userEvent.venue)
data.append('description', userEvent.description)
data.append('startDetails', userEvent.startDetails)
data.append('endDetails', userEvent.endDetails)
data.append('token', localStorage.getItem("token"))
data.append('currency', userEvent.currency)
data.append('lat', userEvent.lat)
data.append('lng', userEvent.lng)
data.append('address1', userEvent.address1)
data.append('address2', userEvent.address2)
data.append('address3', userEvent.address3)
data.append('address4', userEvent.address4)
data.append('eventPassword', userEvent.eventPassword)
data.append('globalRefundPolicy', userEvent.globalRefundPolicy)
data.append('globalRefundOptions', JSON.stringify(userEvent.globalRefundOptions))
data.append('region', userEvent.region)
data.append('tickets', userEvent.tickets)
data.append('ticketTypesEquivalent', userEvent.ticketTypesEquivalent)

userEvent.tickets.forEach(item => {
    data.append(`tickets[]`, JSON.stringify(item));
  });


axios.post(`${process.env.REACT_APP_API}/image`, data)
    .then(res => {
        console.log('res', res)
        
        })

        .catch(err => {
        console.log("imgerr", err)
    })

【讨论】：