通过FormData上传文件

问题描述：

我想上传文件到使用Multer的Node后端。 Multer要求表单以特定方式提交。如果未以这种方式提交，request.file参数将为undefined。我创造了一种通过使用暴力的方法。该工作方式是这样的：通过FormData上传文件

指数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中构建表单。在试图做到这一点，我创建了以下内容：

指数2.HTML [我的UI]

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）中的提交按钮时，我注意到在提琴手中，通过在index-2.html中发送的值发送了不同的值。

随着指数1.HTML的方法，提琴手显示在“的TextView”标签是这样的：

------WebKitFormBoundary183mBxXxf1HoE4Et 
Content-Disposition: form-data; name="selectedFile"; filename="picture.PNG" 
Content-Type: image/png 

PNG

然而，当我照“的TextView”选项卡中的提琴手发送的数据通过index-2.html，我看到以下内容：

------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属性？

谢谢！

答

在索引1.HTML，使用的是一个文件输入：

<input type="file" id="selectedFile" name="selectedFile" />

在索引2.HTML，要创建一个普通形式的输入（而不是一个文件输入）：

var node = document.createElement("input");       
node.name = 'selectedFile'; 
node.value = GLOBAL_SELECTED_FILE; 
form.appendChild(node);

要创建文件输入，您需要添加node.type = 'file'。但是，您将无法设置，因为browser security restrictions prevent setting the value of file inputs.

相反，你需要做的是追加，是由用户选择的FormData对象的文件中值：

var data = new FormData(form); 
data.append('id', this.id); 
data.append('selectedFile', $('#fileInputElement')[0].files[0]);

通过FormData上传文件

相关推荐