Question

我正在为SPL（软件生产线）创建架构，我需要尽可能简化工作，以达到工业生产力的目的。该架构是RESTful，服务器端的Web API，Angular 2＆amp;简而言之，客户端的材料2。

我刚才有这个问题

由于我编写了前端和后端，有可能在我的表单中有文件上传控件，我只是从该文件中获取二进制数据并将其与其他属性一起发送到服务器中吗？ / p>

换句话说，我想发送类似这样的信息，而不是 multipart / form-data ：

{  
   "title":"we in the garden",
   "tags":[  
      "family",
      "holidy"
   ],
   "file":" is it possible to include file's binary data here? "
}

如果是，我会错过什么，如果不是，为什么不呢？

Answer 1

可能但不推荐

可以使用FileReader.readAsDataURL() API将文件作为base64 encoded字符串存入内存。

  vm.previewFile = function() {
    readBase64(vm.files[0]).then(function(data) {
      vm.data = data;
    })
  }  

  function readBase64(file) {
    var reader  = new FileReader();
    var future = $q.defer();

    reader.addEventListener("load", function () {
      future.resolve(reader.result);
    }, false);

    reader.addEventListener("error", function (event) {
      future.reject(event);
    }, false);

    reader.readAsDataURL(file);

    return future.promise;
  }

Demo on PLNKR.

但是，base64编码效率低下。将二进制文件转换为base64编码的DOMstring (UTF-16)将占用266％的内存。浏览器可能会因大型视频文件而崩溃。

直接发布文件效率更高：

//RECOMMENDED
//Send binary file directly
var config = { headers: { "Content-Type": undefined },
               params: { filename: vm.files[0].name,
                         size: vm.files[0].size,
                         type: vm.files[0].type
                       } 
             );
$http.post(url, vm.files[0], config);

$http service将使用XHR send method将browser File object流式传输到服务器。

<input type="file" files-input 
       ng-model="files" ng-change="previewFile()"
/>

files-input指令：

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function() {
        ngModel.$setViewValue(elem[0].files);   
      });
    }
  };      
});

是否可以上传文件＆＃39;二进制数据通过JSON到服务器？

1 个答案:

可能但不推荐