使用DataForms將創建的文件對象發佈到busboy

我在將POST JSON發送到服務器時遇到了一些問題。我有工作代碼文件提交使用輸入文件窗體。使用DataForms將創建的文件對象發佈到busboy

提交文件的代碼。

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的內容。窗體工作得很好，所以我想堅持下去，但我不確定是否有任何需要。

來源

2017-05-22 AESTHETICS

怎麼不工作你的第二個代碼嗎？你有什麼錯誤嗎？ –

我沒有收到服務器端的文件。 – AESTHETICS

我其實是。失蹤」）」。 – AESTHETICS

好的，所以我刪除了偵聽器，因爲我一直在使用它，並用函數和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>

來源

2017-05-22 13:19:10 AESTHETICS

使用DataForms將創建的文件對象發佈到busboy

回答

相關問題