javascript - 模拟图像上传到 Cloudinary

Question

我用来将书籍封面上传到 Cloudinary 的表单上有一个 input type='file'。不过，我也希望不允许上传图像，即当表单提交时，没有向 input type='file' 提供文件。 Cloudinary 响应请求失败，状态代码为 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 仍然响应请求失败，状态代码为 400。我如何说服它接受以编程方式创建的"file"？

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

Answer 1

您需要将 blob 数据转换为数据 URI，Cloudinary 上传方法的文件参数将接受该 URI。

请尝试以下代码库将 blob 数据转换为数据 URI。您可以将其附加到表单数据中。

const blob = new Blob([""],{ type: "image/png"});
blob["最后修改日期"] = "";
blob["名称"] = "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("文件", blob_base64data);