尝试从 Blob 创建文件但输出文件的大小无效

Question

我正在创建一个 canvas 来旋转图像并创建一个 blob。但我需要它作为文件上传到服务器。

return new Promise((resolve, reject) => {
        canvas.toBlob(blob => {
            // returning an error
            if (!blob) {
                reject(new Error('Canvas is empty'));
                return;
            }
            // blob.name = fileName;
            // creating a Object URL representing the Blob object given
            const rotatedImageUrl = window.URL.createObjectURL(blob);
            resolve(rotatedImageUrl);
        }, 'image/jpeg');
    });

我正在尝试从 blob 创建一个文件。我可以使用此代码段创建它。

const rotatedFile = new File([img], originalFile.name, {
        type: originalFile.type,
    });

但问题是生成的文件大小只有 58 字节。

lastModified: 1644577677380
lastModifiedDate: Fri Feb 11 2022 17:07:57 GMT+0600 (Bangladesh Standard Time) {}
name: "IMG_4792.JPG"
size: 58
type: "image/jpeg"
webkitRelativePath: ""

我认为图像以某种方式损坏了。最初我认为 canvas 以某种方式破坏了我的图像，但我也尝试从转换为 blob 的上传文件创建一个文件。这也给了我相同的输出。文件大小不正确。

const file = e.target.files[0];
const blobUrl = URL.createObjectURL(file);
const generatedFile = new File([blobUrl], 'untitled', {
            type: file.type,
        });

有什么解决办法吗？如何从 blob 正确创建文件？

Answer 1

为什么要使用 createObjectURL？

您应该直接解析 blob resolve(blob); 然后文件将正确表示图像，而不是表示 objectURL。

您看到的是生成的 url 的长度。类似于 "blob:https://........'

尝试从 Blob 创建文件但输出文件的大小无效

Trying to Create a File from Blob but the Output file has Invalid Size

javascript

blob

file

reactjs