ArrayBuffer 到二进制图像文件

Question

我正在使用一个 React 组件作为我的 MarkDown 编辑器。该组件提供了一个 dropzone 来粘贴文件，它接受一个回调函数，该回调函数传递给文件（主要是图像文件）的 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 构建的。

Answer 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 其中文件已保存。我希望这可以帮助某人并在某个时候拯救他们。

ArrayBuffer 到二进制图像文件

ArrayBuffer to binary image file

javascript

binaryfiles

reactjs

react-md