Question

我用来将书籍封面上传到Cloudinary的表格上有一个input type='file'。但是，我也不允许上传任何图片，也就是说，在表单提交时，没有文件提供给input type='file'。 Cloudinary回复Request failed with status code 400。

这是我尝试模拟文件以将其上传到Actionin中的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

您需要将blob数据转换为数据URI，Cloudinary的上载方法的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。

模拟图像上传到Cloudinary

2 个答案: