我正在使用 Angular 和 multer-s3 将文件从 Angular 应用程序上传到节点服务器。在桌面上一切正常，但由于某种原因，当尝试通过我的 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 有关？但正如您从上面的图片中看到的那样，两者似乎都很好。会继续研究...
***** 更新肯定上传空文件。但它只在手机上？
此外，我在发送到节点服务器之前检查了 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-type 功能，但确实给出了相同的结果
**** 第 4 天
我开始调试这个问题已经 96 小时了。没有取得任何进展。仍在试图弄清楚为什么它在桌面而不是移动设备上工作。对于任何想要快速总结行为的人：
用户在桌面上传图片
用户将图像放在画布上
使用比例图像
用户按下 sendImage
这会将图像转换为 dataUri 然后 blob
此 blob 被添加到附加到 formData 的文件中
这个formData被发送到一个nodejs服务器，multer-s3中间件将文件成功上传到s3
用户在手机上试用
第 7 步失败。文件已上传，但为空。
如果有人对如何继续有任何想法，请告诉我。