使用带有 angular.js 的 $http 或 $resource 将文本 blob 作为文件上传 - 模仿 curl 样式 multipart/form 上传

Question

所以我需要：使用带有 angular.js 的 $http 或 $resource 将文本 blob 作为文件上传 - 模仿 curl 样式 multipart/form 上传。

有一个我将尝试更明确地说明这个问题，希望有人能找出我可能误入歧途的地方。

这是我知道可用于此服务的 curl 命令示例：

curl \
http://c.docverter.com/convert \
-F from=markdown \
-F to=pdf \
-F input_files[]=@<(echo hello) #or @example.md for a file

来自 sinatra 的成功日志响应示例

{"input_files"=>[{:filename=>"api.md", :type=>"text/markdown", :name=>"input_files[]", :tempfile=>#<Tempfile:/tmp/RackMultipart20160426-3-5tb8po>, :head=>"Content-Disposition: form-data; name=\"input_files[]\"; filename=\"api.md\"\r\nContent-Type: text/markdown\r\n"}], "from"=>"markdown", "to"=>"pdf"}

关于我需要做什么

我需要上传降价文本（我假设使用 blob）作为 "file" - 我已经尝试了 $resource 和 $http 的十几种不同的配置，但没有成功。

我第 100 次 angular 尝试后的典型悲惨日志响应：

{"from"=>"markdown", "input_files"=>["{}"], "to"=>"pdf"}

代码示例：

angular.module('app')
  .factory('convert', function ($resource) {
    return $resource('http://c.docverter.com/convert', null, {
    pdf: {
      method: 'POST',
      headers: { 'Content-Type': 'multipart/form-data' },
      params: {
        from: 'markdown',
        to: 'pdf',
        'input_files[]': new Blob(['##title'], 'text/markdown')
      }
    }
  });
});

这实际上只是我尝试过的例子之一。我已经为此努力了几个小时，但运气不佳，所以，也许这里有人对多部分表单数据了解更多，并且可以阐明 blob 和 angular.[=18 的陷阱=]

Answer 1

好的，睡个好觉，再睡一个小时，我的上传和下载工作正常：

var fd = new FormData();
var blob = new Blob([$scope.markdown], {type: 'text/markdown'});
var file = new File([blob], "abc.md");
fd.append('input_files[]', file);
fd.append('from', 'markdown');
fd.append('to', 'pdf');

$http.post('https://mydocverterserver.com/convert', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined},
    responseType: 'arraybuffer'
})
.success(function(response){
  var b = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
  FileSaver.saveAs(b, 'abc.docx');
})
.error(function(res){
  console.log(res);
});

还是有点粗糙 - 我可能会清理它并把它移到工厂，但它可以工作。

这是一个 docx，但它也适用于 markdown 和 pdf。

FileSaver 位来自：angular-file-saver

如果您像我一样正在寻找特定于 docverter 的解决方案 - 我会解释服务器端修复

使用带有 angular.js 的 $http 或 $resource 将文本 blob 作为文件上传 - 模仿 curl 样式 multipart/form 上传

uploading text blob as file using $http or $resource with angular.js - mimicking curl style multipart/form upload

blob

http

multipartform-data

angularjs

docverter