使用 Busboy、html/ajax 和 nodejs 上传文件答案

【问题标题】：File uploading using Busboy, html/ajax, and nodejs使用 Busboy、html/ajax 和 nodejs 上传文件
【发布时间】：2016-05-08 11:30:07
【问题描述】：

我已经按照另一个示例使用 busboy 在堆栈溢出时在此处上传和获取文件：

Node.js File Upload (Express 4, MongoDB, GridFS, GridFS-Stream)

但是，不是让 busboy 对 'busboy.on(...)' id 做出反应，而是通过处理 ajax 调用上的数据来解决它，这样页面就不会在表单操作等上发生变化。我的前端是在 react js 中完成的，所以这就是我之前尝试过的方式：

import React, {Component} from 'react';
import {bindAll} from 'lodash';
import $ from 'jquery';

export default class Pitch extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data_uri: null,
      processing: false
    }

    bindAll(this, 'handleFile', 'handleSubmit');
  }

  handleSubmit(e) {
    e.preventDefault();
    const _this = this;

    this.setState({
      processing: true
    });

    const promise = $.ajax({
      url: '/file/video',
      type: "POST",
      data: {
        data_uri: this.state.data_uri,
        filename: this.state.filename,
        filetype: this.state.filetype
      },
      dataType: 'json'
    });

    promise.done(function(data){
      _this.setState({
        processing: false,
        uploaded_uri: data.uri
      });
    });
  }


  handleFile(e) {
    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onload = (upload) => {
      this.setState({
        data_uri: upload.target.result,
        filename: file.name,
        filetype: file.type
      });
      console.log(this.state.data_uri);
    };

    reader.readAsDataURL(file);
  }

  render() {
    let processing;
    let uploaded;

    if (this.state.uploaded_uri) {
      uploaded = (
        <div>
          <h4>Image uploaded!</h4>
          <img className='image-preview' src={this.state.uploaded_uri} />
          <pre className='image-link-box'>{this.state.uploaded_uri}</pre>
        </div>
      );
    }

    if (this.state.processing) {
      processing = "Processing image, hang tight";
    }

    return (
      <div className='row'>
        <div className='col-sm-12'>
          <label>Upload an image</label>
          <form onSubmit={this.handleSubmit} encType="multipart/form-data">
            <input type="file" name="file" onChange={this.handleFile} />
            <input disabled={this.state.processing} className='btn btn-primary' type="submit" value="Upload" />
            {processing}
          </form>
          {uploaded}
        </div>
      </div>
    );
  }
}

我想我的问题是我不需要在我的 ajax 调用的数据字段中发送什么才能在服务器中触发 busboy.on..

服务器调用：

 app.post('/file/video', function(req, res) {
  var busboy = new Busboy({ headers : req.headers });
  var fileId = new mongoose.mongo.ObjectId();

  busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
    console.log('got file', filename, mimetype, encoding);
    var writeStream = gfs.createWriteStream({
      _id: fileId,
      filename: filename,
      mode: 'w',
      content_type: mimetype,
    });
    file.pipe(writeStream);
  }).on('finish', function() {
    // show a link to the uploaded file
    res.writeHead(200, {'content-type': 'text/html'});
    res.end('<a href="/file/' + fileId.toString() + '">download file</a>');
  });

  req.pipe(busboy);
});

【问题讨论】：

标签： javascript ajax node.js mongodb reactjs

【解决方案1】：

啊，我在搜索后发现了，但我们可以像这样发送表单数据：

let data = new FormData(document.getElementById('formData'));
    const promise = $.ajax({
      url: '/file/video',
      type: "POST",
      data: data /*{
        data_uri: this.state.data_uri,
        filename: this.state.filename,
        filetype: this.state.filetype
      }*/,
      processData: false,
      contentType: false
      //dataType: 'json'
    });

通过搜索表单数据.. :p

【讨论】：