反应 :我们如何在单击功能中使用 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));