Multer没有将文件上载到服务器

Question

我正在尝试通过Multer将文件上载到服务器。这段代码所做的只是创建文件夹，而不是文件。我还尝试使用github上的教程，但在前端我的代码也没有成功

<p class="font-weight-bolder mb-3">Upload Screenshot
    <form enctype="multipart/form-data"></form><input id="uploadFile" type="file" name="image" />
</p>

代码AJAX

$('#uploadFile').on('change', function(){
  var file = $(this).get(0).files[0];
  console.log(typeof file);
  console.log(file)
  console.log(file.name)
  var formData = new FormData();
  formData.append('Upload', file, file.name);
  $.ajax({
    url: $(this).attr('action') || window.location.pathname + '/repr_screenshot',
    type: "POST",
    data: file,
    cache: false,
    processData: false,
    success: function(data){
      console.log("success")
    },
    error: function(data){
      console.log("file not uploaded")
    }
  });
})

还有MAIN.JS

var multer  = require('multer')

var storage = multer.diskStorage({
  destination: 'views/repr/mixin/screenshots',
  filename: '/file.png'})

var upload = multer({storage: storage,
  onFileUploadStart: function (file) {
    console.log(file.originalname + ' is starting ...')
  }
});

router.post('/repr_screenshot', upload.single('image'), function (req, res, next) {
  console.log(req.file);
  return false;
})

我从前端获得的console.log输出：

对象

文件

Capture.PNG

并且console.log（req.file）的输出为“未定义”




Answer 1

目标和文件名这两个属性都应该是函数

const storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, "views/repr/mixin/screenshots");
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  },
});

const upload = multer({ storage: storage }).single("image");


router.post("/repr_screenshot", (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      console.log(err);
      return res.end("error file uploading");
    }
    res.status(200);
  });
});

让我知道，如果有任何问题。

更新：上传前目标文件夹应该存在。

我已将.single（'file'）更改为.single（'image'）作为您的字段名。