इसे मोंगोडब में सहेजने के लिए ब्लॉब से बाइनरी में कनवर्ट करना

तो मुझे लगता है कि आपकी समस्या इस पंक्ति में है:

new_project.picture.data = fs.readFileSync(req.body.picture[0]);

और यह mongoDB टेबल कॉलम है जिसे आप data डाल रहे हैं उसमें आपको वह त्रुटि दे रहा है। यह एक स्ट्रिंग या बफ़र की अपेक्षा कर रहा है और आपने इसे एक फ़ाइल ऑब्जेक्ट दिया है।

आप मैंने यहां क्या पोस्ट किया है , जिसे मैं नीचे आपके कोड के साथ जोड़ने का प्रयास करूंगा:

आपको यह सुनिश्चित करना होगा कि आपकी फ़ाइल (फाइलों) को एकत्र करने के लिए आपके पास एक चर है। मेरे पेज के शीर्ष को इस प्रकार सेट किया गया है:

import React from 'react'
import Reflux from 'reflux'
import {Form, Card, CardBlock, CardHeader, CardText, Col, Row, Button } from 'reactstrap'
import actions from '~/actions/actions'
import DropZone from 'react-dropzone'

// stores
import SomeStore from '~/stores/someStore.jsx'

Reflux.defineReact(React)
export default class myUploaderClass extends Reflux.Component {
  constructor(props) {
    super(props);
    this.state = {
        attachments: [],
    };
    this.stores = [
        SomeStore,
    ]
    ....

फिर नए फ़ंक्शन बाइंड करें:

    ....
    this.getData = this.getData.bind(this);
    this.processFile = this.processFile.bind(this);
    this.errorHandler = this.errorHandler.bind(this);
    this.progressHandler = this.progressHandler.bind(this);
  } // close constructor

फिर हम बाइट्स को attachments . को सप्लाई करने पर काम करते हैं और इसे new_project.picture.data पर भेज रहा है . मेरे लिए, मैं एक फ़ंक्शन का उपयोग करता हूं जो onDrop runs चलाता है onDrop={this.uploadFile} . का उपयोग करके ड्रॉपज़ोन का . मैं वास्तव में नहीं बता सकता कि आप क्या कर रहे हैं क्योंकि मुझे नहीं पता कि filesToUpload क्या है को संदर्भित करता है। मेरा uploadFile ऐसा दिखता है:

uploadFile(event){
  this.setState({
    files: event,
  });

  document.getElementById('docDZ').classList.remove('dragover');
  document.getElementById('progress').textContent = '000';
  document.getElementById('progressBar').style.width = '0%';

  this.state.files = event;  // just for good measure
  for (let i = 0; i < this.state.files.length; i++) {
    const a = i + 1;
    console.log('in loop, pass: ' + a);
    const f = this.state.files[i];

    this.getData(f); // this will load the file to SomeStore.state.attachments
  }
}

और यह होगा getData ड्रॉपज़ोन में छोड़ी गई/जोड़ी गई प्रत्येक फ़ाइल के लिए फ़ंक्शन चलाया गया:

getData(f) {
    const reader = new FileReader();
    reader.onerror = this.errorHandler;
    reader.onprogress = this.progressHandler;
    reader.onload = this.processFile(f);
    reader.readAsDataURL(f);
}

फिर processFile() onload . से चलता है:

processFile(theFile) {
  return function(e) {
    const bytes = e.target.result.split('base64,')[1];
    const fileArray = [];

    // *** Collect any existing attachments ***
    // I found I could not get it from this.state, but had to use
    // my store, instead
    if (SomeStore.state.attachments.length > 0) {
      for (let i=0; i < SomeStore.state.attachments.length; i++) {
        fileArray.push(SomeStore.state.attachments[i]);
     }
    }

    // Add the new one to this.state
    fileArray.push(bytes);

    // Update the state
    SomeStore.setState({
      attachments: fileArray,
    });
    // This seemed to automatically add it to this.state, for me.
  }
}

एक बार आपके पास यह हो जाने के बाद, आपको यह करने में सक्षम होना चाहिए:

new_project.picture.data = this.state.attachments[0];

यदि नहीं, तो किसी कारण से, आप इसे exports.create_a_project() के अंदर कॉल करने का प्रयास कर सकते हैं , पहली चीज़ के रूप में आप करते हैं:

getData(req.body.picture[0]);

यह आपके onDrop . को संशोधित किए बिना भी काम कर सकता है आपके पास जो कुछ है उससे दिनचर्या। और अगर this.state.attachments कुछ भी नहीं है, आपका SomeStore.state.attachments निश्चित रूप से, यह मानते हुए कि आपने इसे stores . नामक फ़ोल्डर में सहेजा है someStore.jsx . के रूप में ।

import Reflux from 'reflux'
import Actions from '~/actions/actions`

class SomeStore extends Reflux.Store
{
    constructor()
    {
        super();
        this.state = {
            attachments: [],
        };
        this.listenables = Actions;
        this.baseState = {
            attachments: [],
        };
    }

    onUpdateFields(name, value) {
        this.setState({
            [name]: value,
        });
    }

    onResetFields() {
        this.setState({
           attachments: [],
        });
    }
}
const reqformdata = new SomeStore

export default reqformdata

अतिरिक्त कार्य

errorHandler(e){
    switch (e.target.error.code) {
      case e.target.error.NOT_FOUND_ERR:
        alert('File not found.');
        break;
      case e.target.error.NOT_READABLE_ERR:
        alert('File is not readable.');
        break;
      case e.target.error.ABORT_ERR:
        break;    // no operation
      default:
        alert('An error occurred reading this file.');
        break;
    }
  }

progressHandler(e) {
    if (e.lengthComputable){
      const loaded = Math.round((e.loaded / e.total) * 100);
      let zeros = '';

      // Percent loaded in string
      if (loaded >= 0 && loaded < 10) {
        zeros = '00';
      }
      else if (loaded < 100) {
        zeros = '0';
      }

      // Display progress in 3-digits and increase bar length
      document.getElementById("progress").textContent = zeros + loaded.toString();
      document.getElementById("progressBar").style.width = loaded + '%';
    }
  }

और मेरा ड्रॉपज़ोन और लागू प्रगति संकेतक मार्कअप:

render(){

const dropZoneStyle = {
  height: "34px",
  width: "300px",
  border: "1px solid #ccc",
  borderRadius: "4px",
};

return (
  <Form>
    <Col xs={5}>
            <DropZone type="file" id="docDZ"
              onDrop={this.uploadFile}
              onDropRejected={this.onDropRejected}
              onClick={this.handleUploadClick}
              onChange={this.handleChange}
              onDragEnter={this.handleDragEnter}
              onDragLeave={this.handleDragLeave}
              accept=".doc, .docx, .gif, .png, .jpg, .jpeg, .pdf"
              multiple="true"
              maxSize={999000}
              style={dropZoneStyle}>
               {'Click HERE to upload or drop files here...'}
            </DropZone>
            <table id="tblProgress">
              <tbody>
                <tr>
                  <td><b><span id="progress">000</span>%</b> <span className="progressBar"><span id="progressBar" /></span></td>
                </tr>
              </tbody>
            </table>
          </Col>
      </Row>
    </Form>
    )
  } // close render
}  // close class

और सीएसएस:

.progressBar {
  background-color: rgba(255, 255, 255, .1);
  width: 100%;
  height: 26px;
}
#progressBar {
  background-color: rgba(87, 184, 208, .5);
  content: '';
  width: 0;
  height: 26px;
}

अन्य कार्य जो आपको याद आ रहे हैं:

handleUploadClick(){
  return this.state;
}

handleChange(){
  this.state.errors.fileError = "";
}

handleDragEnter(event){
  event.preventDefault();
  document.getElementById("docDZ").classList.add("dragover");
}

handleDragLeave(event){
  event.preventDefault();
  document.getElementById("docDZ").classList.remove("dragover");
}

onDropRejected(files){
    const errors ={}
    let isAlertVisible = false;

    for(let i=0, j = files.length; i < j; i++){
      const file = files[i];
      const ext = file.name.split('.').pop().toLowerCase();
      //console.log(ext)

     if(this.isFileTypeValid(ext)===false){
        errors.fileError = "Only image files (JPG, GIF, PNG), Word files (DOC, DOCX), and PDF files are allowed.";
        isAlertVisible = true;
     }

     if(ext === "docx" || ext ==="gif" || ext ==="png" || ext ==="jpg" || ext ==="jpeg" || ext ==="pdf" || ext ==="doc" && file.size > 999000){
      errors.fileError = "Exceeded File Size limit! The maximum file size for uploads is 999 KB.";
      isAlertVisible = true;
    }

    this.setState({
      "errors": errors,
      "isAlertVisible": isAlertVisible,
    })
  }
}