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