angularjs - 使用输入表单将数据上传到 Yesod 服务器

Question

在 Yesod 中通过自定义输入表单上传文件的正确方法是什么？

我用 AngularJS 开发了一个前端，并通过 JSON 对象将数据传入和传出服务器。但是，这在上传文件时不起作用。出于这个原因，我诉诸于表格。

收集不同的资源，我最终得到了以下代码。在客户端我使用以下函数:

this.submitNewMeas = function() {
    var selected_file = document.getElementById('measurements').files[0];
    var fd = new FormData();
    fd.append("measurementsFile", selected_file);

    var response =  $http({
    method: 'POST',
    url: '/measurements/'+this.currMedia.id,
    headers: {
                'Content-Type': 'multipart/form-data'
    },
    data: {
                fd
    },
    transformRequest: formDataObject
    });
    ...
    };

在服务器端我收到的数据如下:

postMeasurementsR :: MediaId -> Handler Value
postMeasurementsR mediaId =  do
result <- runInputPost $ iopt fileField "measurementsFile"
case result of
    Just fileInfo -> do
        saveMeas fileInfo "measDir"

saveMeas :: FileInfo -> FilePath -> HandlerT App IO (FilePath)
saveMeas file dest = do
  let filename = unpack $ fileName file
      dest = dest </> filename
  liftIO $ fileMove file dest
  return filename

但这会导致服务器错误

20/Nov/2014:13:40:15 +0100 [Error#yesod-core] <<loop>> @(yesod-core-1.4.3:Yesod.Core.Class.Yesod ./Yesod/Core/Class/Yesod.hs:502:5)
Status: 500 Internal Server Error 54.70131s

如果我不尝试保存数据，则会收到文件信息，并且我能够在服务器上看到文件名。

我已经成功地使用 Yesod 表单上传文件，但是当涉及到自定义表单时，我迄今为止的所有尝试都失败了。

非常感谢任何帮助。

谢谢。

Answer 1

dest = dest </> filename

这就是无限循环的根源:你说“dest 被定义为它本身加上文件名。”发生的情况是，您隐藏了 dest 的原始声明。一个简单的解决方案是将第二个声明称为 dest' (或者更好，提供更多信息)。