Как извлечь FormData из объекта с другими данными

Question

Итак, я отправляю изображения на свой сервер, а также пытаюсь отправить данные из изображения в мою базу данных, включая имя файла, путь и т. Д. c .. Прямо сейчас я отправляю свои данные FormData отдельно от моих альбомов (это .state.albums) объект, который работает нормально при отправке изображения на мой сервер, но при попытке вставить его в мою базу данных он не будет работать, потому что не может получить доступ к другим данным для вставок перед моим изображением (файлом) / FormData вставить: Строка INSERT INTO file, где я добавляю req.file, выдавая ошибку TypeError: Cannot read property 'length' of undefined в строке: request.body.files.length. То, что я хочу сделать, а также то, что было сказано, это добавить изображение (я предполагаю, что FormData) в состояние моих альбомов. Причина, по которой я хочу это сделать, заключается в том, чтобы иметь возможность получить доступ ко всем данным до вставки моего изображения (файла) и иметь только один запрос.

Вот как я хочу, чтобы мое состояние (данные) выглядело при выполнении запроса.

Что касается того, что у меня было раньше это было FormData {}.

Я делаю все запросы к одной конечной точке и все мои вставки в одной функции, чтобы использовать данные из моих других вставок в других вставках (а также вставку изображения / файла). Я использую вставленный идентификатор альбомов для использования в качестве идентификатора альбома (ССЫЛКИ вставляет идентификатор альбомов) для вставки в мою базу данных изображений (файлов) Строка: INSERT INTO file. вот почему лучше иметь все данные вместе и только один запрос на моем веб-интерфейсе.

Так, как я могу извлечь FormData из моего объекта альбомов, чтобы добавить к моему серверу, как если бы я использовал его сам?

Вот как я получаю изображение на свой сервер, когда я отправлял только данные FormData:

var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public')
    }, 
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' +file.originalname)
    }
})

var upload = multer({ storage: storage });

app.use(bodyParser.urlencoded({extended: true}));

app.post('/albums', upload.single('file'), apiCall.addData);

И отправляю данные в мою базу данных

const addData = (request, response) => {
const uuid = uuidv4(); 
let album_id;

    response.status(201).send({ message: "Success" });
     db.pool.query('INSERT INTO albums (title, date, description, id) VALUES ($1, $2, $3, $4) ON CONFLICT (id) DO NOTHING RETURNING *' , [request.body.title, request.body.date, request.body.description, uuid])
    .then(res => {
      album_id = res.rows[0].id;
      console.log('INSERT ' + res.rowCount);
      console.log(request.file)
      console.log(request.body)
    }).then(() => {
       const dbQueryPromises = [];
       for (let i = 0; i < request.body.files.length; i++) {
        dbQueryPromises.push(db.pool.query('INSERT INTO songs (id, name, link, index, album_id) VALUES ($1, $2, $3, $4, $5) ON CONFLICT (album_id, index) DO NOTHING RETURNING *', [uuidv4(), request.body.files[i].name, request.body.files[i].link, request.body.files[i].index, album_id]))
      }
        return Promise.all(dbQueryPromises);
        }).then(res => {
         console.log('Array of INSERT result for second insert');
    }).then(() => {
        db.pool.query(
        'INSERT INTO file (name, type, size, path, album_id) VALUES ($1, $2, $3, $4, $5) ON CONFLICT (album_id) DO NOTHING RETURNING *',
        [request.file.filename, request.file.mimetype, request.file.size, request.file.path, album_id]);
      }).then((res) => {
         // console.log("INSERT INTO file(images) " + request.body.data);
      }).catch(error => console.log(error));

 }

ReactJS (2 запроса, когда я хочу только 1)

this.setState({
      file: event.target.files[0],
    });

onClickHandler = () => {
    const data = new FormData()
    data.append('file', this.state.file)
      axios.post("http://localhost:3000/albums", data, { 
     }).then(res => {
      console.log(res.statusText)
 })
}

async save2(event) {
  event.preventDefault();

  await this.setState(prevState => ({
  files: prevState.files.map((file, index) => ({...file, index})
)}));
  let files = this.state.files;

   await this.setState(prevState => ({
   albums: {...prevState.albums, files}
}))

    let albums = this.state.albums;

    axios.post("http://localhost:3000/albums", albums, { 
  }).then(res => { // then print response status
    console.log(res.statusText)
 })

}

onClick(event) {
  this.save2(event);
  this.onClickHandler();
}

render() {
    return (
        <ButtonToggle onClick={this.onClick} color="success">Save
         </ButtonToggle> 
)
}