Прочтите файл blob в base64 и загрузите на сервер
Когда я помещаю файл в область загрузки, 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",
"title": "1397-01-20 13.43.24.jpg"
}
]
Прочитал эту ссылку и пытаюсь загрузить файл: React dropzone, как загрузить изображение?
Но я думаю, что файл не будет отправлен.
Это мой код:
let formData = new FormData();
formData.append('file', picture[0]);
fetch('http://localhost:8000/api/media', {
method: 'POST',
body: formData
});
Если этот метод неверен, как отправить файл на сервер и получить его на стороне сервера?
На стороне сервера я использую Hapij.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я решил проблему. Я пишу ответ, потому что никто не ответил на этот вопрос.
На стороне клиента я использую API FileReader для чтения данных 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...
}
У меня этот метод работает отлично.
@AminRahimi Я не получаю никаких исключений. Прочитал эту ссылку и по обещанию перепишу код: stackoverflow.com/questions/6926016/…
Я не знаю response-dropzone, но если этот код работает, значит, тот, о котором идет речь, тоже должен работать. Оба метода ожидают на входе Blob-объект.
readAsDataURL принимает только File или Blob, как вы сделали это исключение без исключения ?! developer.mozilla.org/en-US/docs/Web/API/FileReader