文件上傳使用打雜，HTML/Ajax和的NodeJS

Question

我使用打雜上傳和在這裏得到堆棧溢出文件，隨後又如：

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

然而，而不必打雜的「打雜反應.on（...）'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> 
    ); 
    } 
} 

我想我的問題是我不究竟我在數據字段送我的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); 
}); 

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