Multer gibt `undefined` für Datei-Uploads mit ReactJS zurück

Question

Unabhängig davon, wie ich den Datei-Upload implementiere, bekomme ich eine undefined zurückgegeben, wenn Sie die req.file Eigenschaft der Anfrage in Express überprüfen.

..

-Code Reagieren

Komponente:

import Files from 'react-files'; 

<form encType="multipart/formdata"> 
    <Files 
     ref='files' 
     onChange={this.onFileUpload}> 
    </Files> 
</form> 

Methode:

onFileUpload (files) { 

    let reader = new FileReader(); 

    reader.onload = upload => { 
     this.setState({ 
      dataURI: upload.target.result 
     },() => { 

      if (typeof appState.balance == 'number' && appState.balance > 0) { 
       appState.onFileAdd(files, this.state.dataURI); 

      } else { 
       this.setState({ modal: true }); 
      } 

     }); 
    } 

    reader.readAsDataURL(files[files.length - 1]); 
} 

Das funktioniert richtig; Der dataURI Wert im Status ist legitim und korrekt eingestellt.

..

API-Aufruf-Code

export async function funFile(name, dataURI) { 
    let data = new FormData(); 

    data.append('file', dataURI); 
    data.append('name', name); 

    return await fetch('http://localhost:1185/fun', 
    { method: 'POST', data }).then(res => { 
     if (res.ok && res.status == 200) { 
      return res.json(); 
     } else { 
      return null; 
     } 
    }); 
} 

data hier Inspizieren gibt die erwartete FormData Objekt, obwohl ohne die Fähigkeit, die zugewiesenen name und file Attribute zu sehen (ob dies, weil sie nicht richtig zugewiesen oder dies ist das erwartete Verhalten, ich bin mir nicht sicher).

..

Express-Code

var multer = require('multer'); 
var upload = multer({ destination: 'uploads/' }); 

app.post('/fun', upload.single('file'), (req, res) => { 

    console.log('file', req.file); 
    console.log('files', req.files); 

    // both of these return undefined 
}); 

Unabhängig davon, was ich an dieser Stelle tun, gibt die Anfrage keine Datendatei. Die req.body-Eigenschaft ist ebenfalls leer.

Ich weiß nicht genau, wo die Dinge hier schief gelaufen sind, und von allen möglichen Tutorials und exemplarischen Vorgehensweisen zu dieser Implementierung habe ich alle möglichen syntaktischen Permutationen ausprobiert, so dass jede Hilfe geschätzt wird!

Answer 1

Ich glaube, das Problem ist mit dem Lesen der Datei als Daten-URL. Vergessen Sie die FileReader. Sie müssen nichts lesen, übergeben Sie einfach ein Dateiobjekt an Ihre FormData und Sie sollten alles eingestellt sein.

onChange

onFileUpload (files) { 

    this.setState({ 
    file: files[files.length-1] 
    },() => { 

    if (typeof appState.balance == 'number' && appState.balance > 0) { 
     appState.onFileAdd(files, this.state.file); 
    } else { 
     this.setState({ modal: true }); 
    } 

    }); 
} 

API-Aufruf

export async function funFile(name, file) { 
    let data = new FormData(); 

    data.append(name, file); // name here should be avatar 

    return await fetch('http://localhost:1185/fun', 
    { method: 'POST', data }).then(res => { 
     if (res.ok && res.status == 200) { 
      return res.json(); 
     } else { 
      return null; 
     } 
    }); 
}