使用POST将文件从HTML5网页上传到Node.js服务器

Question

亲爱，

我想使用基于HTML5和Node.js的服务器实现文件上传网页。此外，我不想在客户端使用表单标记，我需要向服务器发送有关文件信息的额外数据。我使用自定义HTTP标头，以便服务器可以捕获它。

目前我的问题是客户端可以将文件上传到服务器，但是服务器保存文件包含其他数据，例如HTTP标头和边界。

我认为服务器存储来自客户端的所有HTTP请求包括HTTP头，文件二进制数据和边界等附加值。

如何在服务器端仅存储文件数据？

服务器是使用HTTP模块实现的，当前我不能更改服务器的主模块，因为很多东西已经在服务器端实现了。

客户端 ：

// HTML Code
<tr>
    <td><textarea id="customData1"></textarea></td>
    <td><textarea id="customData2"></textarea></td>
    <td><input type="file" id="uploadFile"></td>
    <td><button id="uploadFile" onclick="uploadFileToServer()">Upload</button</td>
</tr>

// JavaScript Code
function uploadFileToServer() {
    var file = document.getElementById("uploadFile").files[0];
    var uri = "/uploadFile";
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    xhr.open("POST", uri, true);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };

    xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=\\\"Boundary\\\"");

    xhr.setRequestHeader("my-custom-data-one", document.getElementById("customData1").value);
    xhr.setRequestHeader("my-custom-data-two", document.getElementById("customData2").value);
    xhr.setRequestHeader("file-size", file.size);
    xhr.setRequestHeader("file-name", file.name);

    fd.append("myFile", file);
    xhr.send(fd);
}
</script>

我试过一些方法，但一切都行不通。

服务器端 ：

基本服务器代码）

http.createServer(function (req, res) {
    if (req.method === 'POST') {
        // Need to add upload file code
    }
}).listen(PORT.Main);

情况1）使用附加的块数据。但是也写了无用的数据（标题/边界）。

 req.on('data', function (data) {
     console.log(data)
     fs.appendFileSync(filename, data)// += data;

 });

 req.on('end', function () {
     res.writeHead(200, { 'content-type': 'text/plain' })
     res.write('Upload Complete!\n');
     res.end();
 });

情况2）使用writeStream。但是也写了无用的数据（标题/边界）。

var file = './temp.file'
var downloadWriteStream = fs.createWriteStream(file);
req.pipe(downloadWriteStream);
req.on('end', function () {
    res.writeHead(200, { 'content-type': 'text/plain' })
    res.write('Upload Complete!\n');
    res.end();
});

情况3）使用Formidable npm模块，但它返回错误消息：错误：MultipartParser.end（）：流意外结束：state = START_BOUNDARY

var form = new formidable.IncomingForm();

form.parse(req);

form.on('fileBegin', function (name, file) {
    file.path = filename;
});

form.on('file', function (name, file) {
    console.log('Uploaded ' + file.name);

    res.writeHead(200, { 'content-type': 'text/plain' })
    res.write('Upload Complete!\n');
    res.end();
});

感谢您阅读此问题，我期待着您的回答。

Answer 1

看看multer。这让这非常容易。

客户端示例代码：

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>

服务器示例代码：

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})