我在我的Angular/Node应用程序中遇到了一个问题,无法正确地定向照片。我的应用程序设置为使用ng2-file-upload将文件从Angular应用程序发送到服务器,Multer和Multer-s3将该照片保存在AWS S3中。然后,我将文件名保存在Postgres数据库中,并使用它通过URL调用照片。
我的问题是,如果照片由iPhone上传(也可能是其他设备,我只尝试过iPhone),则会向左旋转。我已经尝试了几种不同的服务器端选项,但都没有成功。这包括fix-orientation和jpeg-autorotate库。
是否有人在客户端的Angular2+上实现了解决方案?以下是我的服务器端图像上传代码。
我的问题是,如果照片由iPhone上传(也可能是其他设备,我只尝试过iPhone),则会向左旋转。我已经尝试了几种不同的服务器端选项,但都没有成功。这包括fix-orientation和jpeg-autorotate库。
是否有人在客户端的Angular2+上实现了解决方案?以下是我的服务器端图像上传代码。
aws.config.loadFromPath(path3);
var s3 = new aws.S3();
var fileName = '';
var uploadM = multer({
storage: multerS3({
s3: s3,
bucket: 'XXX',
acl: 'public-read',
metadata: function (req, file, cb) {
console.log(file);
console.log(req.file);
cb(null, {fieldName: file.fieldname});
},
key: function (req, file, cb) {
fileName = Date.now().toString() + "-" + (Math.round(Math.random() * 10000000000000000)).toString() + '-' + file.originalname;
cb(null, fileName)
}
})
});
router.post('/upload', uploadM.array('photo', 3), function(req,res) {
if (res.error) {
return res.status(400).json({
message: "Error",
error: res.error
});
}
return res.status(200).send(fileName);
});
module.exports = router;
以下是我的Angular应用程序代码:
public uploader:FileUploader = new FileUploader({url: this.devUrl, itemAlias: 'photo'});
constructor(
private userS: UserService,
private authS: MyAuthService,
private router: Router,
private itemS: ItemService,
private uis: UiService) {}
ngOnInit() {
this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false; };
this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
this.awsUrls.push('AWSURL' + response);
this.filesUploaded = true;
this.uploaderLoading = false;
};
}
addItem() {
this.uploaderLoading = true;
this.itemS.onNewItem(this.awsUrls)
.subscribe(data => {
this.uis.onFlash('Posted Successfully. Add Details!', 'success');
this.itemS.onSetUpdateItemId(data.id, false);
this.uploaderLoading = false;
this.onPhotoAdded();
}, resp => {
this.uploaderLoading = false;
this.uis.onFlash('Error Posting', 'error');
console.log(resp);
});
}
onUploadClicked() {
this.uploader.uploadAll();
this.uploaderLoading = true;
}