使用 DataForms 将创建的文件对象发布到 busboy答案

【问题标题】：POSTing created file object with DataForms to busboy使用 DataForms 将创建的文件对象发布到 busboy
【发布时间】：2017-05-22 12:11:16
【问题描述】：

我在将 JSON 发布到服务器时遇到了一些问题。我有使用输入文件表单提交文件的工作代码。

文件提交代码。

var http = require('http'),
path = require('path'),
fs = require('fs');

var Busboy = require('busboy');
var express = require('express');
var app = express();
app.set('view engine', 'hjs');
var dir = './Files';
if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}

app.get('/', function (req, res) {
    res.render('index', {})
})
app.post('/', function (req, res) {
    var busboy = new Busboy({ headers: req.headers });
    busboy.on('file', function (fieldname, file, filename,encoding, mimetype) {

        var saveTo = path.join(dir, path.basename(filename));
        console.log(path.basename(filename));
        file.pipe(fs.createWriteStream(saveTo));


    });
    busboy.on('finish', function () {
        console.log('Done parsing form!');
        res.writeHead(303, { Connection: 'close', Location: '/' 
    });
        res.end();
    });
    req.pipe(busboy);
    })
app.listen(8000, function () {
    console.log('Example app listening on port 8000!')
})

使用此客户端代码：

<html>
<body>

    <form method="POST" enctype="multipart/form-data">
    <input type="file" name="filefield"><br />
    <input type="submit">

</body>
</html>

这是我正在尝试制作但没有成功的新客户端代码：

<body>
<script>
 var data = {a:1, b:2, c:3};
 var json = JSON.stringify(data);
 var parts = [new Blob([json], {type: 'application/json'})];

var fileToSend = new File(parts, 'sample.json', {
type: "application/json"
})

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

oData = new FormData(form);

oData.append("files", fileToSend);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://localhost:8000/", false);
oReq.send(form);


};

oReq.send(oData);
ev.preventDefault();
}, false);</script>


<form enctype="multipart/form-data" method="post" name="fileinfo">
<input type="submit" value="Stash the file!" />
</form>
<div></div>
</body>

我想将我创建的 JSON 文件发布到服务器，名称是我在创建对象时给服务器提供的名称以及来自 JavaScript 的内容。表格工作得很好，所以我想坚持下去，但我不确定是否有任何需要。

【问题讨论】：

你的第二个代码怎么不工作？你有什么错误吗？
我没有在服务器端接收文件。
其实我是。缺少“)”。
我用“)”修复了错误，但现在它说“Uncaught TypeError: Cannot read property 'addEventListener' of null”
@AESTHETICS 只是一个注释。您的脚本（上图）在 DOM 加载之前正在执行。将您的脚本放在结束 body 标记之前或将您的代码放在 window.onload 函数中。

标签： javascript json node.js busboy

【解决方案1】：

好的，所以我删除了侦听器，因为我在使用它时遇到了一些错误，并将其替换为一个函数和 onclick 事件。

代码如下：

<body>
<script>
    function PassJSON() {
        var data = { a: 1, b: 2, c: 3 };
        var json = JSON.stringify(data);
        var parts = [new Blob([json], { type: 'application/json' })];

        var fileToSend = new File(parts, 'sample.json', {
            type: "application/json"
        })
        var form = document.forms.namedItem("fileinfo");
            formData = new FormData(form);

            formData.append("file", fileToSend);


            var request = new XMLHttpRequest();
            request.open("POST", "http://localhost:8000/");
            request.send(formData);



};
</script>
<form enctype="multipart/form-data" method="post" name="fileinfo">
    <button type="button"  onclick="PassJSON()">Send JSON'a</button>
</form>
<div></div>

这是一个带有监听器的解决方案：

<body>

<form enctype="multipart/form-data" method="post" name="fileinfo">
    <input type="submit" value="Stash the file!" />
</form>
<div></div>
<script>var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {


var data = { a: 1, b: 2, c: 3 };
        var json = JSON.stringify(data);
        var parts = [new Blob([json], { type: 'application/json' })];

        var fileToSend = new File(parts, 'sample.json', {
            type: "application/json"
        })

        var oOutput = document.querySelector("div"),
        oData = new FormData(form);

        oData.append("CustomField", fileToSend);

        var oReq = new XMLHttpRequest();
        oReq.open("POST", "", true);
        oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
        oOutput.innerHTML = "Uploaded!";
        } else {
        oOutput.innerHTML = "Error " + oReq.status + " occurred when trying 
     to upload your file.<br \/>";
  }
};

oReq.send(oData);
ev.preventDefault();
}, false);</script>
</body>

【讨论】：