JavaScript意外旋转图像
我有一个VUE应用程序,需要在formdata等服务器上上传图像。正如我发现图像是否太大的Javascipt,意外地将图像旋转90°。我不明白。没有命令对图像进行任何更改。这是代码:
uploadFiles(files) {
this.validateUploadFiles(files);
if( this.uploadErrors?.length ) return;
this.loading = true;
const timestamp = Date.now();
files.forEach( (file, index) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
const image = new Image();
image.src = fileReader.result;
image.onload = async () => {
const formData = new FormData();
formData.append("file", file);
formData.append("index", index);
formData.append("timestamp", timestamp); // This is cause we need to delete prev old remaining files.
try {
const result = await this.$api.media.uploadCampaignPdfExportMedia( this.campaignId, formData );
this.uploadSuccess.push(result.data.fileName);
} catch ( error ) {
console.log(error);
this.uploadErrors.push( this.$t("campaign.upload.error.upload_failed", {name: file.name}) );
}
};
};
});
this.loading = false;
},
我不明白那里发生了什么。有人可以告诉我发生了什么事吗?
I have a Vue application which need to upload images on server like FormData. As I found out if image is too big Javascipt accidentally rotate the image by 90°. I dont understand it. There is not command to make any changes on image. This is the code:
uploadFiles(files) {
this.validateUploadFiles(files);
if( this.uploadErrors?.length ) return;
this.loading = true;
const timestamp = Date.now();
files.forEach( (file, index) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
const image = new Image();
image.src = fileReader.result;
image.onload = async () => {
const formData = new FormData();
formData.append("file", file);
formData.append("index", index);
formData.append("timestamp", timestamp); // This is cause we need to delete prev old remaining files.
try {
const result = await this.$api.media.uploadCampaignPdfExportMedia( this.campaignId, formData );
this.uploadSuccess.push(result.data.fileName);
} catch ( error ) {
console.log(error);
this.uploadErrors.push( this.$t("campaign.upload.error.upload_failed", {name: file.name}) );
}
};
};
});
this.loading = false;
},
I dont understand what happened there. Can somebody tell me please what is going on?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论