Multer通过ReactJS返回`undefined`用于文件上传

Question

无论我如何实现文件上传，当检查Express中请求的req.file属性时，我会得到undefined。

..

阵营代码

组件：

import Files from 'react-files'; 

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

方法：

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

这正常工作;该状态中的dataURI值是合法的并且设置正确。

..

API调用代码

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这里返回预期FormData对象，虽然没有看到指定的name和file属性（这是否是因为他们的能力没有正确分配，或者这是预期行为，我不确定）。

..

快速代码不管什么，我在这一点上做的

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

，请求返回没有文件数据。 req.body属性也是空的。

我不确定事情在这里出了什么问题，并且从这个实现的所有可能的教程和演练中我已经尝试了所有可能的语法变体，我可以想到，所以任何帮助都会被赞赏！

Answer 1

我相信问题是读取文件作为数据url。忘记FileReader。您不需要阅读任何内容，只需将文件对象传递给您的FormData即可完成设置。

的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调用

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