[英]Uploading File via FormData
我正在尝试将文件上传到使用Multer的Node后端。 Multer要求以特定方式提交表单。 如果没有以这种方式提交,则request.file
参数将是undefined
。 我已经创建了一种使用蛮力的方法。 这种工作方法如下:
指数1.HTML:
<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
<input type="file" id="selectedFile" name="selectedFile" /><br/><br/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
...
var btn = document.getElementById('btnSubmit');
btn.addEventListener('click', function(e) {
e.preventDefault();
var form = $('#fileUploadForm')[0];
var data = new FormData(form);
console.log(data);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/upload",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
console.log("SUCCESS!");
},
error: function (e) {
console.log("ERROR : ", e);
}
});
});
上面的代码成功将文件发布到我的服务器。 该服务器具有以下内容:
server.js
app.post('/upload', upload.single('selectedFile'), function(req, res) {
if (req.file) {
console.log('file uploaded');
} else {
console.log('no file');
}
res.send({});
});
使用上面的代码,“文件上传”将按预期显示在控制台窗口中。 但是,我需要一种更有活力的方法。 出于这个原因,我需要以编程方式在JavaScript中构建表单。 为了做到这一点,我创建了以下内容:
index-2.html [我的用户界面]
var btn = document.getElementById('btnSubmit');
btn.addEventListener('click', function(e) {
var form = document.createElement('form');
form.action = '/upload';
form.method = 'POST';
form.enctype = 'multipart/form-data';
var node = document.createElement("input");
node.name = 'selectedFile';
node.value = GLOBAL_SELECTED_FILE;
form.appendChild(node);
var data = new FormData(form);
data.append('id', this.id);
console.log(data);
$.ajax({
type: 'POST',
url: '/profile-picture/upload',
enctype: 'multipart/form-data',
data: data,
contentType: false,
processData: false,
success: function(res) {
console.log('success!');
},
error: function(xhr, status, err) {
console.log('error');
}
});
});
第二种方法不起作用。 为了澄清, GLOBAL_SELECTED_FILE
变量是从输入元素中选择的文件的数据。 数据通过FileReader api加载。 看起来像这样:
var GLOBAL_SELECTED_FILE = null;
var fileReader = new FileReader();
fileReader.onload = function(e) {
GLOBAL_SELECTED_FILE = e.target.result;
}
fileReader.readAsDataURL(fileSelected); // file selected comes from the onchange event on a <input type="file">..</input> element
基本上,我正在加载图像的预览。 无论如何,当我点击工作版本中的提交按钮(index-1.html)时,我注意到在Fiddler中,对index-2.html中发送的值发送了不同的值。
使用index-1.html中的方法,Fiddler在“TextView”选项卡中显示如下内容:
------WebKitFormBoundary183mBxXxf1HoE4Et
Content-Disposition: form-data; name="selectedFile"; filename="picture.PNG"
Content-Type: image/png
PNG
但是,当我在Fiddler中查看通过index-2.html发送的数据的“TextView”选项卡时,我看到以下内容:
------WebKitFormBoundary9UHBP02of1OI5Zb6
Content-Disposition: form-data; name="selectedFile"
data:image/png;base64,iVBORw0KGg[A LOT MORE TO GO]
就像FormData对同一个值使用两种不同的编码一样。 但是,我不明白为什么。 如何让index-2.html以与index-1.html相同的格式发送图像,以便Multer填充req.file属性?
谢谢!
在index-1.html中,您正在使用文件输入:
<input type="file" id="selectedFile" name="selectedFile" />
在index-2.html中,您正在创建普通表单输入(不是文件输入):
var node = document.createElement("input");
node.name = 'selectedFile';
node.value = GLOBAL_SELECTED_FILE;
form.appendChild(node);
要创建文件输入,您需要添加node.type = 'file'
。 但是,您将无法设置该值,因为浏览器安全限制会阻止设置文件输入的值。
相反,您需要做的是将用户选择的文件追加到FormData
对象:
var data = new FormData(form);
data.append('id', this.id);
data.append('selectedFile', $('#fileInputElement')[0].files[0]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.