Question

我在我的节点服务器上使用了multer模块。

这是Node js代码：

app.post('/image/', upload.single('file'), function(req, res) {
var response = [];
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader('Content-Type', 'application/json');
var file = 'temp_images' + '/' + req.file.filename;
fs.rename(req.file.path, file, function(err) {
if (err) {
        response.push({'result' : 'false'});
        res.status(200).send(JSON.stringify(response));
} else {
            CallOtherFunction(req.file.filename)
            response.push({'result' : 'true'});
            res.status(200).send(JSON.stringify(response));
        }
    });
});

使用html表单上传图片，看起来像这样可以正常工作：

<form action="http://servertoupload/image/" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" />
  <input id='submit' type="submit" value="Upload File" />
</form>

*但是如何通过纯javascript实现这一点，没有表单元素？

* OR：如何为客户端禁用页面重新加载/加载'response.push'站点？

非常感谢，这让我发疯。

Answer 1

使用fetch和FormData即可完成此任务。

稍微改变一下HTML：

<input type="file" name="file" />
<button type="button">Upload</button>

然后使用JavaScript响应按钮点击：

document.querySelector('button').addEventListener('click', function () {
  if(document.querySelector('input').files.length === 0) return
  var file = document.querySelector('input').files[0]

  var formData = new FormData()
  formData.append('file', file)

  fetch('http://servertoupload/image/', {
    method: 'POST',
    body: formData
  }).then(r => r.text()).then(console.log)

}）

响应将记录在控制台中。

如何使用multer.js通过Javascript将图像上传到节点服务器？

1 个答案: