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-busboy" ...） . 使用 React.js (create-react-app) 和 Firebase/storage:

运行解决办法： https://filemeta-4dcb1.firebaseapp.com/

代码：

App.js（将由 index.js 附加到 Div（根））：

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（初始化 Firebase）：

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": {
    "@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": "*"
  }

干杯！

Busboy + Express：如何获取发送的文件及其规格

Busboy + Express: How to get the sended file and its specifications

express

busboy