反应：我们如何使用 Fetch 或 Axios 在单击功能中上传图像和输入文本

Question

所以基本上我是新手，找不到关于同时上传图像和输入值的单个文档或资源。

一个解决方案是 Form Data，但它没有按预期工作

另一种方法是Serialize，但是我找不到任何解释在React中使用的方法的文档

所以，如果有人能帮助我，那对我和 React 的新手来说真的很棒。

Answer 1

你可以试试下面的方法你可以使用multer with 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));

反应：我们如何使用 Fetch 或 Axios 在单击功能中上传图像和输入文本

REACT : How can we Upload Image and Input text using Fetch or Axios in a single click function

node.js

express

reactjs