正在上载带有FormData和multer的文件

Question

我已经成功地使用multer模块将文件上传到节点服务器，方法是使用输入文件对话框选择文件，然后提交表单，但现在我需要创建一个FormData对象，而不是提交表单，并使用XMLHttpRequest发送文件，但它不起作用，文件始终是服务器端（路由器）的undefined。

执行AJAX请求的函数是：

function uploadFile(fileToUpload, url) {
  var form_data = new FormData();
  form_data.append('track', fileToUpload, fileToUpload.name);
  // This function simply creates an XMLHttpRequest object
  // Opens the connection and sends form_data
  doJSONRequest("POST", "/tracks/upload", null, form_data, function(d) {
    console.log(d);
  })
}

注意，由于调用了正确的路由器方法，因此定义了fileToUpload，并且url是正确的。fileToUpload是一个File对象，它是通过将文件从文件系统拖放到dropzone，然后访问drop事件的dataTransfer属性而获得的。

doJSONRequest是一个创建XMLHttpRequest对象并发送文件等（如注释中所述）的函数。

function doJSONRequest(method, url, headers, data, callback){
  //all the arguments are mandatory
  if(arguments.length != 5) {
    throw new Error('Illegal argument count');
  }
  doRequestChecks(method, true, data);
  //create an ajax request
  var r = new XMLHttpRequest();
  //open a connection to the server using method on the url API
  r.open(method, url, true);
  //set the headers
  doRequestSetHeaders(r, method, headers);
  //wait for the response from the server
  r.onreadystatechange = function () {
    //correctly handle the errors based on the HTTP status returned by the called API
    if (r.readyState != 4 || (r.status != 200 && r.status != 201 && r.status != 204)){
      return;
    } else {
      if(isJSON(r.responseText))
        callback(JSON.parse(r.responseText));
      else if (callback !== null)
        callback();
    }
  };
  //set the data
  var dataToSend = null;
  if (!("undefined" == typeof data) 
    && !(data === null))
    dataToSend = JSON.stringify(data);
  //console.log(dataToSend)
  //send the request to the server
  r.send(dataToSend);
}

这是doRequestSetHeaders:

function doRequestSetHeaders(r, method, headers){
  //set the default JSON header according to the method parameter
  r.setRequestHeader("Accept", "application/json");
  if(method === "POST" || method === "PUT"){
    r.setRequestHeader("Content-Type", "application/json");
  }
  //set the additional headers
  if (!("undefined" == typeof headers) 
    && !(headers === null)){
    for(header in headers){
      //console.log("Set: " + header + ': '+ headers[header]);
      r.setRequestHeader(header, headers[header]);
    }
  }
}

我上传文件的路由器如下

// Code to manage upload of tracks
var multer = require('multer');
var uploadFolder = path.resolve(__dirname, "../../public/tracks_folder");
function validTrackFormat(trackMimeType) {
  // we could possibly accept other mimetypes...
  var mimetypes = ["audio/mp3"];
  return mimetypes.indexOf(trackMimeType) > -1;
}
function trackFileFilter(req, file, cb) {
  cb(null, validTrackFormat(file.mimetype));
}
var trackStorage = multer.diskStorage({
  // used to determine within which folder the uploaded files should be stored.
  destination: function(req, file, callback) {
    callback(null, uploadFolder);
  },
  filename: function(req, file, callback) {
    // req.body.name should contain the name of track
    callback(null, file.originalname);
  }
});
var upload = multer({
  storage: trackStorage,
  fileFilter: trackFileFilter
});

router.post('/upload', upload.single("track"), function(req, res) {
  console.log("Uploaded file: ", req.file); // Now it gives me undefined using Ajax!
  res.redirect("/"); // or /#trackuploader
});

我的猜测是，multer不理解fileToUpload是一个名为track的文件（不是吗？），即中间件upload.single("track")无法正常工作/解析，或者根本无法与FormData一起工作，在这种情况下会一团糟。继续使用骡子有什么替代方案？

如何使用AJAX和multer上传文件？

如果您需要更多详细信息，请随时询问。

Answer 1

multer使用multipart/form-data内容类型请求上传文件。从doRequestSetHeaders函数中删除此位应该可以解决您的问题：

if(method === "POST" || method === "PUT"){
   r.setRequestHeader("Content-Type", "application/json");
}

您不需要指定content-type，因为FormData对象已经使用了正确的编码类型。来自文档：

传输的数据与表单的submit（）格式相同如果设置了表单的编码类型，则方法将用于发送数据到多部分/表单数据。

下面是一个工作示例。它假设有一个id为drop-zone的dropzone和一个id为upload-button的上传按钮：

var dropArea  = document.getElementById("drop-zone");
var uploadBtn = document.getElementById("upload-button");
var files     = [];
uploadBtn.disabled = true;
uploadBtn.addEventListener("click", onUploadClick, false);
dropArea.addEventListener("dragenter", prevent, false);
dropArea.addEventListener("dragover",  prevent, false);
dropArea.addEventListener("drop", onFilesDropped, false);   
//----------------------------------------------------
function prevent(e){
    e.stopPropagation();
    e.preventDefault();
}
//----------------------------------------------------
function onFilesDropped(e){
    prevent(e);
    files = e.dataTransfer.files;
    if (files.length){
        uploadBtn.disabled = false;
    }
}
//----------------------------------------------------
function onUploadClick(e){
    if (files.length){
        sendFile(files[0]);
    }
}
//----------------------------------------------------
function sendFile(file){
    var formData = new FormData();
    var xhr      = new XMLHttpRequest();
    formData.append("track", file, file.name);
    xhr.open("POST", "http://localhost:3000/tracks/upload", true);
    xhr.onreadystatechange = function () {  
        if (xhr.readyState === 4) {  
            if (xhr.status === 200) {  
                console.log(xhr.responseText);
            } else {  
                console.error(xhr.statusText);  
            }  
        }  
    };
    xhr.send(formData);
}

服务器端代码是一个简单的express应用程序，具有您提供的确切路由器代码。

Answer 2

要发布multer接受的FormData对象，上传函数应该是这样的：

function uploadFile(fileToUpload, url) { 
    var formData = new FormData();
    //append file here 
    formData.append('file', fileToUpload, fileToUpload.name);
    //and append the other fields as an object here
    /* var user = {name: 'name from the form',
        email: 'email from the form' 
        etc...       
    }*/
    formData.append('user', user);
    // This function simply creates an XMLHttpRequest object
    // Opens the connection and sends form_data
    doJSONRequest("POST", "/tracks/upload", null, formData, function(d) {
        console.log(d);
    })
}