Загрузить файл (изображение) и данные одновременно с помощью react и node - PullRequest
Новая
       6

Загрузить файл (изображение) и данные одновременно с помощью react и node

0 голосов
/ 03 августа 2020

В настоящее время я загружаю изображение и данные, используя два вызова к серверу, и я хочу сократить это до одного вызова к серверу.

Мой текущий код внешнего интерфейса выглядит следующим образом. Поле ввода: 

<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 не определен, когда я делаю это.

Что мне не хватает?

1 Ответ

0 голосов
/ 03 августа 2020
• 1000 1005 * 
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)
    })
...