ArrayBuffer 到二进制图像文件答案

【问题标题】：ArrayBuffer to binary image fileArrayBuffer 到二进制图像文件
【发布时间】：2021-06-02 14:34:32
【问题描述】：

我正在使用一个反应组件作为我的 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 构建的。

【问题讨论】：

标签： javascript reactjs binaryfiles react-md

【解决方案1】：

好吧，我好像找到了解决办法。

现在是保存功能：

    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。我希望这可以帮助某人并在某个时候拯救他们。

【讨论】：