Javascript 读取base64中的blob文件并上载到服务器上
当我将文件放入上载区域时,将返回一个对象,例如:Javascript 读取base64中的blob文件并上载到服务器上,javascript,node.js,reactjs,blob,react-dropzone,Javascript,Node.js,Reactjs,Blob,React Dropzone,当我将文件放入上载区域时,将返回一个对象,例如: let picture = [ { "rawFile": { "preview": "blob:http://localhost:3000/ff851b03-b2c0-4212-9240-8d07057ad47d" }, "src": "blob:http://localhost:3000/ff851b03-b2c0-4212-9240-8d07057ad47d",
let picture = [
{
"rawFile": {
"preview": "blob:http://localhost:3000/ff851b03-b2c0-4212-9240-8d07057ad47d"
},
"src": "blob:http://localhost:3000/ff851b03-b2c0-4212-9240-8d07057ad47d",
"title": "1397-01-20 13.43.24.jpg"
}
]
我阅读了此链接并尝试上载文件:
但我认为文件不会被发送
这是我的代码:
let formData = new FormData();
formData.append('file', picture[0]);
fetch('http://localhost:8000/api/media', {
method: 'POST',
body: formData
});
如果此方法不正确,如何将文件发送到服务器端并在服务器端接收
在服务器端,我正在使用Hapij。我解决了这个问题。我写答案是因为没有人回答这个问题 在客户端,我使用
FileReader
API读取BLOB数据并将其转换为base64
可读格式。我编写了一个函数将blob转换为base64,并将fileName
和base64
发送到服务器端
const convertFileToBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file.rawFile);
reader.onload = () => resolve({
fileName: file.title,
base64: reader.result
});
reader.onerror = reject;
});
在服务器端,我通过以下函数将缓冲区写入文件:
const fs = require("fs");
const Boom = require('boom');
function convertBase64ToFile(file) {
let base64Data = file.base64.split(',')[1];
fs.writeFile(`${__dirname}/../../uploads/${file.fileName}`, base64Data, 'base64', function(err) {
return Boom.badData(err);
});
// Other actions...
}
这个方法非常适合我。readAsDataURL只接受文件或Blob您是如何做到这一点的@阿米拉希米我没有收到任何例外。我阅读了这个链接,并按照承诺重写了代码:我不知道react dropzone,但如果这段代码有效,那么问题中的代码也一定有效。这两种方法都期望一个Blob作为输入。