模拟图像上传到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
    })
... ...

Still Cloudinary响应Request failed with status code 400 。 我如何说服它采用以编程方式创建的“文件”？

目标是处理没有文件的上传。

Answer 1

您需要将Blob数据转换为数据URI，Cloudinary的upload方法的file参数将接受该数据URI。

请尝试在下面的代码库中将Blob数据转换为数据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);

Answer 2

您可以在上载到Cloudinary之前对空文件进行检查，如果没有文件，则可以不上载到Cloudinary，或者每次没有上载文件时都可以使用默认映像来代替创建Blob。