使用 jQuery、Express.js 和 AJAX 上传文件

Question

我正在尝试使用 multer npm 模块上传文件，其中 Express.js、jQuery 和 AJAX。根据 Postman 的说法，我的 API 在上传文件时工作正常。我的问题在 jQuery 方面。

后端

var express = require('express');
var path = require('path');
var router = express.Router();
var Post = require('../models/posts');
var checkPost = require('../middleware/check-post');
var multer = require('multer');         //Module to upload files to the database

/**
 * Specification variable to place the file in the './uploads/' directory and what to call them
 */
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/posts');
  },
  filename: function (req, file, cb) {
    cb(null, new Date().toISOString() + file.originalname)      //new Date().toISOString() converts the current date to a string
  }
});

/**
 * Specification variable to filter for the file types that can be uploaded to posts
 */
const fileFilter = function (req, file, cb) {
  var fileTypes = ['image/jpeg', 'image/png', 'application/pdf', 'application/msword',                           //File types that are allowed
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',                                      //.jpeg, .png, .pdf, .doc, .docx, .ppt, .pptx
    'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']

  if (fileTypes.indexOf(file.mimetype) > -1) {     //Checks to see if file.mimetype is in the fileFilter array
    cb(null, true);
  } else {
    cb(null, false);
  }
};

/**
 * Adds the specification variables to 'multer' and saves them in the upload variable
 */
var upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 10       //Sets the file size limit to 10MB
  },
  fileFilter: fileFilter
});

/**
 * Adds posts to our database
 */
router.post('/addPost', upload.single('post_file'), function (req, res, next) {
  var post = new Post(req.body);

  if (req.file) {
    post.post_file = req.file.path
  }

  post.save(function (err, savedPost) {
    if (err)
      res.status(500).json(err);

    res.status(201).json({
      status: "Successfully added the post",
      id: savedPost._id
    });
  });
});

前端（HTML）

<div class="container-fluid">
  <div class="col-xs-offset-2">
    <h1>Create a Post</h1>
  </div>
</div>

<div class="container-fluid">
  <div class="well col-xs-10 col-xs-offset-1">
    <div class="row col-xs-10 col-xs-offset-1">
      <form class="form-horizontal" role="form" id="postForm">
        <div class="row">
          <div class="form-group">
            <div class="col-xs-12">
              <textarea class="form-control required" style="min-width: 100%" rows="1" placeholder="Title" id="inputPostTitle"></textarea>
            </div>
          </div>
        </div>
        <!---Title--->

        <div class="row">
          <div class="form-group">
            <div class="col-xs-12">
              <textarea class="form-control required" style="min-width: 100%" rows="5" placeholder="Desciption" id="inputPostDesc"></textarea>
            </div>
          </div>
        </div>
        <!---Description--->

        <div class="row">
          <div class="form-group">
            <div class="col-xs-3">
              <label class="btn btn-info">
                <span class="glyphicon glyphicon-paperclip">
                  <input type="file" id="inputPostFile" hidden>
                </span> Attach Files
              </label>
            </div>
            <div class="col-xs-7">
            </div>
            <div class="col-xs-2">
              <a href="#" data-toggle="popover" data-placement="bottom" data-content="Please enter your post...">
                <button type="text" class="btn btn-warning btn-lg">Post</button>
              </a>
            </div>
          </div>
        </div>
        <!---Buttons--->

      </form>
    </div>
  </div>
</div>

<script src="/javascripts/create-post.js"></script>

前端（jQuery）

$(document).ready(function () {
  /**
   * Event handler for when the user submits a post
   */
  $("#postForm").submit(function (event) {
    event.preventDefault();

    var path = window.location.pathname;
    var fields = path.split("/");
    var module = fields[4];                           //Module code
    var route = path.replace("/createPost", "");      //Route for the POST request
    var file = document.getElementById("inputPostFile").files[0];
    var formData = new FormData();
    formData.append("inputPostFile", file);
    console.log(formData);

    $.ajax({
      url: route + '/addPost',
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      successs: function() {
        console.log('success');
      },
      error: function() {
        console.log('error');
      }
    })
  });
});

控制台 returns 出现 POST 500 内部错误。我该如何修改？我可以在文件中附加更多表单数据吗？

Answer 1

在您的 ajax 中您将文件指定为 inputPostFile 但在服务器端它是 post_file.
在 ajax

中将其更改为 post_file

formData.append("post_file", file);

您可以使用相同的附加功能添加任何数据。
此外，您可以将表单作为参数传递给 FormData 构造函数以添加表单中的所有字段，这样您就不必使用追加。
但是，如果您这样做，则必须将名称属性添加到表单字段。

使用 jQuery、Express.js 和 AJAX 上传文件

Uploading a File Using jQuery, Express.js and AJAX

ajax

jquery

express

multer