ArrayBuffer 转二进制图像文件

如何解决ArrayBuffer 转二进制图像文件

我使用 React 组件作为我的 MarkDown 编辑器。该组件提供了一个拖放区来粘贴文件，它接受一个回调函数，该函数传递给文件（主要是图像文件）的 ArrayBuffer。后端需要一个图像文件，就像通过表单上传一样。但事实证明，返回 ArrayBuffer 而不是文件是一个问题。

我已尝试将 ArrayBuffer 转换为 Blob，但后端仍然需要来自上传文件的其他信息，例如二进制图像文件中存在的文件名和大小。 我很感激任何帮助！谢谢。

示例如下：

function converArrayBufferToImage(ab) {
    // Obtain a blob: URL for the image data.
    return new Blob([ab])
}

export default function ReactMdEditor(props) {
    const { value,setValue } = props;

    const save = async function* (file) {
        let fileData = new FormData()
        let convertedFile = converArrayBufferToImage(file)
        fileData.append('file',convertedFile);
        try {
            const response = yield uploadFile(fileData);
            const data = response.data;
            yield data.url;
            return true;
        } catch (error) {
            console.log(error);
            return false;
        }
    };

    return (
        <div>
            <ReactMde
                value={value}
                onChange={setValue}
                childProps={{
                    writeButton: {
                        tabIndex: -1
                    }
                }}
                paste={{
                    saveImage: save
                }}
            />
        </div>
    );
}

编辑：如果需要上下文，我的后端是用 Python、Flask 构建的。

解决方法

好的，我似乎找到了解决方案。

这是现在的保存功能：

    const save = async function* (file) {
    try {
        const blobFile = new Blob([file],{ "type": "image/png" });
        let formData = new FormData()
        formData.append('file',blobFile,'file.png');
        try {
            const response = await uploadFile(formData);
            const data = response.data;
            yield data.url;
            return true;
        } catch (error) {
            console.log(error);
            return false;
        }
    } catch (e) {
        console.warn(e.message)
        return false;
    }
};

您需要在客户端或服务器上生成一个唯一的文件名，以免覆盖同名的现有文件（如果您还没有）。

如果有人需要这个函数的作用的解释：如果只是传递一个数组缓冲区，将其转换为图像 Blob，然后将其上传到服务器，后者返回保存文件的 url。 我希望这可以帮助某人并在某个时候拯救他们。