Загрузка макета изображения в Cloudinary
В форме, которую я использую для загрузки обложки книги в Cloudinary, есть input type='file'. Однако я бы также хотел разрешить загрузку изображений, то есть, когда форма отправляется, в input type='file' нет файла. Cloudinary отвечает Request failed with status code 400.
Вот как я пытаюсь имитировать файл, чтобы загрузить его в Cloudinary внутри действия.
export const addBook = (bookData, history) => (dispatch) => {
const cloudinaryUrl = 'https://api.cloudinary.com/v1_1/*****/upload';
const cloudinaryUploadPreset = '*****';
const formData = new FormData();
bookData.cover[0] && formData.append('file', bookData.cover[0]);
if (!bookData.cover[0]) {
const blob = new Blob([''], { type: 'image/png' });
blob['lastModifiedDate'] = '';
blob['name'] = 'mockImageFile';
blob['webkitRelativePath'] = '';
blob['size'] = 7654;
formData.append('file', blob);
/* const f = new File([''], 'filename', { type: 'image/jpeg' });
formData.append('file', f); */
}
formData.append('upload_preset', cloudinaryUploadPreset);
axios({
url: cloudinaryUrl,
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: formData
})
... ...
Тем не менее Cloudinary отвечает Request failed with status code 400. Как мне убедить его взять программно созданный «файл»?
Цель состоит в том, чтобы обработать загрузку без файла.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам необходимо преобразовать данные большого двоичного объекта в URI данных, который будет принят параметром файла в методе загрузки Cloudinary.
Пожалуйста, попробуйте ниже кодовую базу для преобразования данных большого двоичного объекта в URI данных. который вы можете добавить в formdata.
const blob = new Blob([""],{ type: "image/png" });
blob["lastModifiedDate"] = "";
blob["name"] = "mockImageFile";
blob["webkitRelativePath"] = "";
blob["size"]=7654;
var reader = new FileReader();
var blob_base64data;
reader.readAsDataURL(blob);
reader.onloadend = function() { blob_base64data = reader.result;
};formData.append("file", blob_base64data);
Хотя я мог создать каплю в консоли браузера. Возможно, указанная выше ошибка была вызвана чем-то в моем коде дальше по цепочке.
Пожалуйста, обратитесь: stackoverflow.com/questions/42386027/…
Я вернусь к этому завтра. Здесь уже поздно. Спасибо. JIC, вам любопытно, полное репо находится на github.com/ElAnonimo/booklister. Действие, которое использует загрузку Cloudinary, находится в client / src / action / bookActions.js -> addBook.
Ошибка TypeError: setting a property that has only a getter была вызвана blob['size'] = 7654. Тем не менее, Cloudinary все еще сообщает об ошибке. Когда вы записываете ваш blob_base64data в консоль, я получаю undefined.
Я переместил код вот так. let blob_base64data; reader.readAsDataURL(blob); reader.onloadend = function() { blob_base64data = reader.result; console.info('blob_base64data:', blob_base64data); formData.append('file', blob_base64data); }; blob_base64data подключает "data:image/png;base64," к консоли. Так должен выглядеть blob_base64data для пустого файла?
Вы можете выполнить проверку пустого файла перед загрузкой в Cloudinary и не загружать в Cloudinary, если файл отсутствует, или вы можете использовать изображение по умолчанию каждый раз, когда файл не загружен, вместо создания большого двоичного объекта.
Что могло здесь вызвать ошибку
TypeError: setting a property that has only a getter? Похоже, причиной этого стала установка реквизита наblob.