将文件发送到后端角度完整堆栈答案

【问题标题】：sending file to backend angular full stack将文件发送到后端角度完整堆栈
【发布时间】：2018-04-01 22:21:54
【问题描述】：

我正在使用 yeoman angular fullstack，我正在尝试进行简单的文件上传。我从表单中读取文件，然后将其放入前端就好了

this.$scope.add = function() {

    var f = document.getElementById('resume').files[0];
    var reader = new FileReader();

    reader.onload = (function(theFile) {
      return function(e) {
      console.log(e.target.result);
        Auth.saveResume({
          data: e.target.result,
          name:theFile.name
        });
      };
    })(f);

    reader.readAsArrayBuffer(f);      
  }

在 auth.services.ts 我有

saveResume(resume, callback?: Function) {
  console.log(User)
  return User.saveResume({ id: currentUser._id }, {resume},
    function() {
      console.log('auth.service in function');
      console.log('currentUser._id: ' + currentUser._id);
      return safeCb(callback)(null);
    },
    function(err) {
      return safeCb(callback)(err);
    }).$promise;
},

它成功进入我的后端控制器

router.put('/:id/resume', auth.isAuthenticated(), controller.saveResume);

我有 saveResume 功能的地方

export function saveResume(req, res){

    console.log(typeof req.body.resume.data);
    console.log(typeof req.body.resume.name);

}

当我访问“名称”参数时，在保存恢复功能中它是正确的并且是字符串类型。但是，当我访问“数据”时，我只会得到一个对象。我希望数据是文件或缓冲区，以便我可以将其上传到 s3。

我对为什么它是一个对象而不是 ArrayBuffer 的唯一猜测是我认为节点不支持 javascript ArrayBuffers、blob 或文件。如何以 s3 接受的某种形式在后端获取文件？即文件、blob 或缓冲区

【问题讨论】：

你在服务器端使用 express 吗？文件数据不应该在一个特殊的属性中，比如 req.file （意味着您的客户端服务应该正确设置请求）？或者，您将其编码为 base64 并将其作为正文内容发送，然后在服务器端对其进行解码。
我正在使用快递。有没有什么好的资源来学习如何创建一个特殊的属性来放置文件？

标签： javascript node.js angular amazon-s3

【解决方案1】：

正如@bubblez 建议的那样，我将其编码为base 64

    var fileReader = new FileReader();
    var base64;
     // Onload of file read the file content
     fileReader.onload = function(fileLoadedEvent) {
        base64 = fileLoadedEvent.target.result;
        // Print data in console
        console.log(base64);
        Auth.saveResume(f.name, base64);
      };
    // Convert data to base64
    fileReader.readAsDataURL(f);

我还更改了身份验证，以便它采用两个单独的参数

saveResume(name, data, callback?: Function) {
  console.log(User)
  return User.saveResume({ id: currentUser._id }, {name, data},
    function() {
      console.log('auth.service in function');
      console.log('currentUser._id: ' + currentUser._id);
      return safeCb(callback)(null);
    },
    function(err) {
      return safeCb(callback)(err);
    }).$promise;
},

然后我从 base 64 解码

export function saveResume(req, res){
    var base64String = req.body.data.split(';base64,').pop();
    console.log(base64String);
    var buf = Buffer.from(base64String, 'base64').toString('utf');
    uploadParams.Body = buf;
}

这行得通！

【讨论】：