是否可以通过JSON将文件的二进制数据上传到服务器？

Question

我正在为SPL (软件生产线)创建一个体系结构，我需要使事情尽可能简单，以达到工业生产力的目的。该体系结构是RESTful，服务器端的Web，客户端的角度2&Matters2。

我只是有个问题

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

换句话说，我不想发送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编码字符串带入内存。

  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;
  }

The 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服务将使用XHR发送方法将浏览器文件对象流发送到服务器。

<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);   
      });
    }
  };      
});