我正在使用Ajax上传表单数据。multer(req.file,req.body)的输出始终为undefined
/ {}
;
我的服务器代码:
import multer from 'multer';
import post from './router/api_post';
var upload = multer({dest: 'uploads/'});
app.use('/api/post', upload.single('thumb') , post);
和api_post
路由器文件:
import express from 'express';
var router = express.Router();
router
.post('/', (req, res, next) => {
console.log("POST POST");
var post = {};
console.log(req.body);
console.log(req.file);
});
export default router;
req.body
is{}
和req.file is
undefined`的输出。
我在浏览器端使用react并通过ajax上传数据:
savePost(ev) {
ev.preventDefault();
var editor = this.refs.editorDom.getDOMNode();
var ajaxReq = new AjaxRequest();
var formData = new FormData();
formData.append('post_id', this.state.post_id);
formData.append('title', this.state.title);
formData.append('author', this.state.author);
formData.append('digest', this.state.digest);
formData.append('content', editor.innerHTML);
formData.append('content_source_url', this.state.content_source_url);
formData.append('create_time', new Date());
formData.append('thumb', this.state.thumb);
ajaxReq.send('post', '/api/post', ()=>{
if(ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) {
var result = JSON.parse(ajaxReq.getResponseText());
if(result.ok == 1) {
console.log("SAVE POST SUCCESS");
}
}
}, '', formData);
}
savePost()
按钮的事件侦听器的is回调。我确实用强大的能力成功上传了数据。我只是用穆尔特代替了强大的东西,但没有得到它。
我没有设置content-type属性。我在标题中找到它是, multipart/form-data; boundary=----WebKitFormBoundary76s9Cg74EW1B94D9
该form
的HTML是
<form id="edit-panel" data-reactid=".ygieokt1c0.1.0.1.0.1">
<div id="title" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.0">
<input type="text" class="form-control" name="title" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.0.1">
</div>
<div id="author" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.1">
<input type="text" class="form-control" name="author" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.1.1">
</div>
<div id="thumb" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.2">
<button class="btn btn-default" data-reactid=".ygieokt1c0.1.0.1.0.1.2.1">
<input type="file" name="thumb" accept="image/*" data-reactid=".ygieokt1c0.1.0.1.0.1.2.1.0">
<span data-reactid=".ygieokt1c0.1.0.1.0.1.2.1.1">UPLOAD</span>
</button>
</div>
<div class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.3">
<textarea class="form-control" name="digest" rows="5" data-reactid=".ygieokt1c0.1.0.1.0.1.3.1"></textarea>
</div>
<div id="rich-text-editor" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.4">
<div id="editor-div" class="form-control" contenteditable="true" data-reactid=".ygieokt1c0.1.0.1.0.1.4.1"></div>
</div>
<div id="content-source-url" class="form-group" data-reactid=".ygieokt1c0.1.0.1.0.1.5">
<input type="text" class="form-control" name="content_source_url" value="" data-reactid=".ygieokt1c0.1.0.1.0.1.5.1">
</div>
<button class="btn btn-default" data-reactid=".ygieokt1c0.1.0.1.0.1.6">保存并提交</button>
</form>
我可以输出thumb
,这是一个File{}
对象。
感谢帮助。
最后我发现问题是Content-Type
。
我曾经this.request.setRequestHeader("Content-Type", postDataType);
将设置为,然后将Content-Type
设置postDataType
为''
,那么实际的Content-Type
in标头是, multipart/form-data; boundary=----WebKitFormBoundary76s9Cg74EW1B94D9
如我最初提到的那样。
您可以看到之前有一个逗号和一个空格multipar/form-data
。我不知道这个逗号是从哪里来的。但是无论如何,当我删除逗号和空格时,一切都可以正常工作!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句