РЕАГИРОВАТЬ: Как мы можем загрузить изображение и ввести текст, используя Fetch или Axios в один клик функции

Question

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

Одно решение - Form Data, но оно работает не так, как ожидалось

Другой метод - Serialize, но я не могу найти никаких документов, объясняющих способ использования в React

Так что, мне и новичкам в React было бы здорово узнать об этом, если бы вы мне помогли.

Answer 1

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

Файл реакции

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class App extends Component {
  handleFileChange = e => {
    this.setState({ file: e.target.files[0] });
  };

  handleChange = e => {
    this.setState({ text: e.target.value });
  };

  upload = () => {
    if (this.state.file) {
      let data = new FormData();
      data.append("file", this.state.file);
      data.set("data", this.state.text);

      axios
        .post("http://yourhost/file", data)
        .then(response => console.log(response))
        .catch(error => console.log(error));
    }
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <input type="file" onChange={this.handleFileChange} />
        <input type="button" onClick={this.upload} value="Upload" />
      </div>
    );
  }
}

export defaults App;

Экспресс-сервер

    const express = require('express');
    const app =express();
    const path = require('path');
    const cors = require('cors')();
    const bodyParser = require('body-parser');
    const multer  = require('multer')
    const port =process.env.PORT || 3000;;



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

    app.use(cors);

    const storage = multer.diskStorage({
      destination: __dirname +'/media/',
      filename(req, file, cb) {
       console.log(file);
       cb(null, `${file.originalname}-${new Date()}`);
      }
    });

    const upload = multer({ storage });

    app.post('/file',upload.single('file'), function(req, res) {
      console.log(req.body.data);
      console.log(req.files);
    });

   app.listen(port,()=> console.log('Running on port: '+port));