Busboy + Express:如何获取发送文件及其规范

Question

我在Express.js和Busboy的一个非常简单的例子上挣扎着。代码尽可能简单。这让我和其他人更容易理解到底发生了什么。表格块：

            <form
              action="https:// ... this works ..."
              enctype="multipart/form-data"
              method="post"
            >
              <label class="up_styles">
                <input type="file" name="file" id="somethingTricky"/>
              </label>
              <br />
              <input class="sub" type="submit" value="Submit" />
            </form>

后端：

const functions = require("firebase-functions");

const Busboy = require('busboy');

const express = require("express");

const app = express();

app.post("/api/fileanalyse", (req, res) => {
 const busboy = new Busboy({
    headers: req.headers
});

busboy.on('error', function(err) {
    console.log(err);
});

busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
    console.log(fieldname);
    console.log(file);
    console.log(filename);
    console.log(encoding);
    console.log(mimetype);

    // see other question
    file.resume();

});

busboy.on('finish', function() {
    console.log('finish');
});

return req.pipe(busboy);
});

exports.App = functions.region("europe-west1").https.onRequest(app);

函数中的所有console.logs (字段名、文件、文件名、编码、mimetype)都不工作，console.log('finish')工作。如何从请求中获取文件和文件数据(例如文件名和文件大小)？

Answer 1

好的，它必须继续并找到另一种解决方案，而不用使用Node.js、Express.js和busboy (或者类似于"express-busboy“、”connect“之类的东西)。使用React.js (创建-反应-应用程序)和Firebase/存储：

运行解决方案：https://filemeta-4dcb1.firebaseapp.com/

守则如下：

App.js(将由index.js附加到除法(根))：

import React from 'react';
import Upload from './component/upload';

function App() {
  return (
    <div className="App">
        <h1>file metaservice</h1>
        <Upload />
    </div>
  );
}

export default App;

upload.js(此组件包括除了Firebase init之外的所有内容)：

import React, { Component } from "react";
import Firebase from "./firebase";

class Upload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: "",
    };
    this.setFileState = this.setFileState.bind(this);
    this.fileUpload = this.fileUpload.bind(this);
  }
  setFileState = (e) => {
    this.setState({ [e.target.name]: e.target.files[0] });
  };
  fileUpload = (e) => {
    e.preventDefault();
    // if no file is selected
    if (!this.state.file) {
      console.log("please select a file");
    } else {
      // send file to the database
      const storageRef = Firebase.db.ref('fileupload/' + this.state.file.name);
      storageRef.put(this.state.file);
      storageRef.getMetadata().then(res => {
        document.getElementById('fileDiv').innerText = 'fileName: ' + res.name + ', fileSize: ' + res.size + "b" 
      })
    }
  };
  render() {
    return (
      <div id="fileDiv">
        <form>
          <label>
            <input type="file" name="file" onChange={this.setFileState} />
          </label>
          <br />
          <input type="submit" value="Submit" onClick={this.fileUpload} />
        </form>
      </div>
    );
  }
}

export default Upload;

和firebase.js(到init )：

import app from "firebase/app";
import "firebase/storage";

const firebaseConfig = {
    my firebaseConfig - data ...
  };

class Firebase {
  constructor() {
    app.initializeApp(firebaseConfig);
    this.db = app.storage();
  };
};

export default new Firebase();

package.json(dependencies):

{
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "firebase": "*"
  }

干杯!