Загрузка макета изображения в Cloudinary

Question

Форма, которую я использую для загрузки обложки книги в 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.Как мне убедить его взять программно созданный «файл»?

Цель - обработать загрузку без файла.

Answer 1

Вы можете выполнить проверку на наличие пустого файла перед загрузкой в ​​Cloudinary и не загружать в Cloudinary, если файл отсутствует или вы можете использовать изображение по умолчанию каждый раз, когда файл не загружен, вместо создания большого двоичного объекта.

Answer 2

Вам необходимо преобразовать данные BLOB-объекта в URI данных, который будет принят параметром файла, в метод загрузки Cloudinary.

Пожалуйста, попробуйте ниже кодовой базы преобразовать данные BLOB-объекта в URI данных.которые вы можете добавить его в форму данных.

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);