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這兩個屬性都應該是函數。 文檔參考這里

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