JavaScript意外旋转图像

发布于 2025-02-10 03:01:38 字数 1463 浏览 0 评论 0原文

我有一个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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文