使用 multer 和 ajaxSubmit 上传文件

Question

上传似乎卡在第一条消息“文件正在上传...”上。我以前可以使用它，但即使恢复到以前的代码，它仍然无法使用。我找不到导致问题的原因。

服务器.js

app.post('/api/photo', async (req, res) => {
  try {
    getSize('./uploads/', (err, size) => {
      if (err) {
        throw err;
      } else if (size > 100000000) {
        return res.end(`Daily upload limit reached!!Cannot upload for now`)
      }else if (size )
      upload(req, res, function (err) {
        if (err instanceof multer.MulterError) {
          return res.end(`Some error occured.`);
        }else if(!req.file){
          return res.end(`No files selected.`);
        }else if(err) {
          return res.end(`You can only upload audio files.`);
        }
        res.end("Songs are uploaded");
      });
      /*          console.log('Uploads folder is ' + size / 1024 / 1024).toFixed(2) + ' MB');
       */
    });
  } catch (error) {

  }
});

客户端.js

   $('#uploadForm').submit(function () {
        $("#status").empty().text("File is uploading...");
        $(this).ajaxSubmit({
            error: function (xhr) {
                status('Error: ' + xhr.status);
            },
            success: function (response) {
                $("#status").empty().text(response);
                console.log(response);
            }
        });
        return false;
    });

截图

Answer 1

我认为如果你要做出这些改变，它应该会起作用。

客户端.js

$("#uploadForm").submit(function (e) {
  $("#status").empty().text("File is uploading...");

  e.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    url: $(this).attr("action"),
    type: "POST",
    data: formData,
    success: function (response) {
      $("#status").empty().text(response);
      console.log(response);
    },
    error: function (xhr) {
      status("Error: " + xhr.status);
    },
    cache: false,
    contentType: false,
    processData: false,
  });

  return false;
});

您需要将 contentType 和 processData 属性设置为 false，如果您查看此处，将会解释原因

在您的表单上添加

enctype="multipart/form-data"

使您的表单看起来像这样

<form id="uploadForm" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

注意，现在是我们调用的ajax函数，我们必须自己添加url和表单数据。因此我们可以通过获取表单操作属性来获取带有

var formData = new FormData(this)

和 url 的表单数据（所有这些都在上面的示例中完成）。

此外，我们只是通过从提交函数获取事件并调用

e.preventDefault()

来防止表单默认行为