Question

我跟着另一个例子，使用busboy上传并在堆栈溢出时获取文件：

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

然而，而不是让busboy对＆＃39; busboy.on（...）＆＃39;做出反应。 id喜欢它通过处理ajax调用上的数据来解决这个问题，因此页面只是在表单操作等方面没有改变。我的前端是在反应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>
    );
  }
}

我想我的问题是我不知道为了在服务器中触发busboy.on..，我必须在数据字段中为我的ajax调用发送什么

服务器调用：

 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);
});

Answer 1

啊，我在搜索后想出来但我们可以像这样发送formdata：

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

使用Busboy，html / ajax和nodejs上传文件

1 个答案: