Multer-s3在移动设备上载空文件

Question

我正在使用angular和multer-s3将文件从角应用程序上传到节点服务器。一切都在桌面上运行良好但由于某些原因，当尝试通过我的iPhone 7上传照片时，上传的文件已损坏。我使用相同的图像并在两个设备上运行相同的流程但得到不同的结果所以我假设它是因为移动设备？

这是我尝试在手机上打开S3文件时收到的警报

The file “1519398514215-test.png” could not be opened because it is empty.

这是我的代码

var aws = require('aws-sdk');
var path = require('path');
var path3 = path.join(__dirname, "../config/config-aws.json");
var multer = require('multer');
var multerS3 = require('multer-s3');
var request = require('request');

aws.config.loadFromPath(path3);
var s3 = new aws.S3();
var fileName = '';
var uploadM = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'XXXX',
    acl: 'public-read',
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname + '.png'});
    },
    key: function (req, file, cb) {
      fileName =  Date.now().toString() + "-" + file.originalname + '.png' ;
      cb(null, fileName)
    }
  })
});



router.post('/', uploadM.array('photos', 3), function(req,res) {
  if (res.error) {
    console.log(error.stack);
    return res.status(400).json({
      message: "Error",
      error: res.error
    });
  }
  const url = 'https://s3-us-west-2.amazonaws.com/XXXX/' + fileName;
  return res.status(200).json({
    fileName: url
  });
});

这是我的客户端

sendImage() {
  const formData: FormData = new FormData();

  this.removeObjectFromCanvas('polygon');


  if (!fabric.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
  } else {
    // window.open(this.canvas.toDataURL('png'));
    const image = new Image();
    image.src = this.canvas.toDataURL('png');



        const blob = this.dataURItoBlob(image.src);

        const file = new File([blob], 'test.png');


        formData.append('photos', file, 'test');



        this.postFile(formData);
      }


    }

    postFile(file) {
      this.fileService.post(file)
      .subscribe(data => {

      }, error => {
        console.log(error);
      });
    }

更新**********

所以发现你可以在手机上调试。看起来我发送的缓冲区中包含数据。我的第一个想法是缓冲区没有发送。

****更新仍然无法弄清楚这一点。我做过一些研究，它可能与formData和append有关吗？但正如您从上面的图像中看到的那样，两者似乎都很好。将继续研究......

***** UPDATE绝对上传空文件。但它只在移动设备上？

另外，我在发送到节点服务器之前检查了formData，似乎在其中有正确的数据。

***更新

好吧，甚至更奇怪的体验。似乎multer-s3正在上传空文件但是当我在服务器端获取文件并将其返回到客户端时，然后读取该文件并显示它，图像显示完美。所以formData不是问题，我假设是multer-s3的东西？

****更新我忘了提到我正在使用fabricjs并从画布中获取图像。我在某些地方读到可能存在问题，但就像我上面说的那样，当我将文件发送到服务器并将其发送回客户端时，在读取文件后它会完美地显示图像。

****更新我尝试将contentType添加到multer方法，现在我只在移动设备上运行时收到503服务不可用错误。对于桌面，它很好。

aws.config.loadFromPath(path3);
var file1;
var s3 = new aws.S3();
var fileName = '';
var uploadM = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'rent-z',
    acl: 'public-read',
    contentType: function (req, file, cb) {
      cb(null, 'image/png');
    },
    metadata: function (req, file, cb) {
      console.log(file);
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      fileName =  Date.now().toString() + "-" + file.originalname;
      file1 = file;
      cb(null, fileName)
    }
  })
}).array('photos', 1);



router.post('/', function(req,res) {
  uploadM(req, res, function (err) {
    if (err) {
      console.log(err);
      return res.status(400).json({
        message: "Error uploading to multer",
        error: err
      });
    }
  console.log('worked');

  if (res.error) {
    console.log(error.stack);
    return res.status(400).json({
      message: "Error",
      error: res.error
    });
  }
  // fs.readFile(req.body, function (err, data) { 
  const url = 'https://s3-us-west-2.amazonaws.com/rent-z/' + fileName;
  return res.status(200).json({
    fileName: url
  });
  // });
  })

});

我甚至尝试运行multer-s3的自动查找mime类型函数，并且确实给出了相同的结果

****第4天

自从我开始调试此问题以来已经过了96个小时。没有取得任何进展。仍在试图弄清楚为什么它在桌面而不是移动设备上工作。对于任何寻找行为快速摘要的人：

1. 用户在桌面上上传图像
2. 用户将图像放在画布上
3. 使用比例图像
4. 用户按下sendImage
5. 这会将图像转换为数据Uri blob
6. 此blob将添加到附加到formData的文件中
7. 此formData被发送到nodejs服务器，其中multer-s3中间件成功将文件上载到s3
8. 用户试用手机
9. 在步骤7失败。文件已上载但为空。

如果有人对如何继续有任何想法，请告诉我。

Answer 1

我会将此作为“官方”答案，因为这可能适合您的需求。任何时候我都有这样一个复杂的问题，我的第一个想法通常是“我想知道是否有可以为我抽象的API / SaaS /服务。”正如您所发现的，文件上传非常棘手，特别是当您开始投入我们必须处理的无数设备时。

我不会提及任何特定的服务，但谷歌搜索“文件上传saas”通常会让你成为顶级的行业参与者。每月25美元 - 50美元，你可以将文件上传抽象为一个非常简单的api调用。您现在不仅可以节省时间，而且（假设您选择了一个可靠的提供商），您将来不会再担心文件上传。 SaaS的工作是确保文件上传能够在数百万种不同的设备上运行;确保S3集成工作是SaaS的工作，即使S3的api发生变化也是如此;这是SaaS的工作，以确保用户看到一个友好的友好消息，如果他们的上传由于某种原因失败，等等。我花时间为我们的应用程序构建功能，而不是担心文件上传是否在iPhone 47上工作。

“但后来我被捆绑在一个SaaS上，并且随心所欲地生活在他们的价格和功能集中”啊，但你可以把这个问题减到最小。对于我们使用的许多服务，我喜欢创建一个包装器/接口/无论你想要什么。在文件上传的情况下，我制作了一个ES6模块：fileUploads.js

在这个模块中，我有一个方法upload。这种方法有什么作用？它只是实现和抽象[fileupload SaaS X]的API。如果将来我们希望或需要从SaaS X更改为SaaS Y，我只需要在整个应用程序中更改一件事：我的fileUpload.js模块。