使用Node与Multer上传图片到本地文件夹成功但文件未保存问题求助

核心问题梳理 #

• 前端AJAX配置的url字段为空，会导致请求发送地址错误，无法命中后端上传接口
• 后端响应返回时机错误：res.send逻辑写在multer异步存储回调的外部，不等存储逻辑执行完成就提前返回了成功响应
• 后端错误未透传：存储过程出现错误时仅在控制台打印，未返回错误响应，前端无法感知失败
• 潜在变量问题：now变量未在filename回调中定义，可能导致文件名生成失败

修正后代码 #

前端代码 #

<form id="tasasImage" enctype="multipart/form-data" style="display: flex; flex-direction: column;">
  <input type="file" name="photo" id="photo" class="file">
  <br>
  <div id="uploadImg" class="btn btn-primary">ENVIAR</div>
</form>
<script>
$("#uploadImg").click(function () {
    if ($('#photo').val().length > 0) {
      var formData = new FormData($('#tasasImage')[0]);
      console.log([...formData])
      $.ajax({
          // 此处替换为你的实际接口地址，注意替换最后的id参数
          url: "/admin/aliados/tasas/1",
          data: formData,
          type: "POST",
          processData: false,
          contentType: false,
          success: function(r){
            console.log('Uploaded successfully');
            $("#photo").val('');
          },
          error: function (e) {
               console.log("some error", e);
          }
      });
  }
})
</script>

后端代码 #

var storageTasas = multer.diskStorage({
    destination: function(req, file, callback) {
       callback(null, config.urlBase+'public/images/tasas');
  },
    filename: function(req, file, callback) {
       // 补全now变量定义，也可自定义其他命名规则
       const now = Date.now();
       var name = now+'-'+file.originalname;
       callback(null, name);
  }
})
var uploadTasas = multer({ storage: storageTasas }).single('photo');
const tasasUploadImage = (req, res) => {
    uploadTasas(req, res, (err) => {
       if (err) {
           console.error(err);
           // 存储出错时返回错误响应
           return res.status(500).send({msg: '上传失败', error: err.message});
       }
       console.log('Successfully Uploaded');
       // 存储完成后再返回成功响应
       res.send({'file': Date.now()});
    })
}
router.post('/admin/aliados/tasas/:id', adminController.tasasUploadImage);

额外验证项 #

• 确认Node运行进程对目标存储文件夹有读写权限
• 可以在destination回调中打印拼接后的路径，确认和你预期的存储路径完全一致

内容的提问来源于stack exchange，提问作者Santiago