时间戳

首页 > 解决方案 > 使用react和node同时上传文件（图片）和数据

node.js - 使用react和node同时上传文件（图片）和数据

问题描述

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

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

<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 是未定义的。

我错过了什么？

标签： node.jsreactjsfile-upload

解决方案

我想到了。

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

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

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

推荐阅读