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 输出：

Object

File {name: "Capture.PNG", lastModified: 1597907180050, lastModifiedDate: Thu Aug 20 2020 10:06:20 GMT+0300 (Eastern European Summer Time), webkitRelativePath: "", size: 89172, …}

Capture.PNG

console.log(req.file) 的输出是“未定义”

Answer 1

destination 和 filename 两个属性都应该是函数。文档参考here

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') 作为您的字段名。