模拟图像上传到 Cloudinary答案

【问题标题】：Mock image upload to Cloudinary模拟图像上传到 Cloudinary
【发布时间】：2018-12-30 16:44:08
【问题描述】：

我用来将书籍封面上传到 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。如何说服它采用以编程方式创建的“文件”？

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

【问题讨论】：

标签： javascript cloudinary

【解决方案1】：

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

请尝试以下代码库将 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);

【讨论】：

这里有什么可能导致错误TypeError: setting a property that has only a getter？似乎在blob 上设置道具导致了这种情况。
虽然我可以在浏览器控制台中创建一个 blob。也许错误是由我的代码中的 smth 引起的。
请参考：stackoverflow.com/questions/42386027/…
我明天再谈。这里已经很晚了。谢谢你。 JIC 你很好奇完整的 repo 在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。

【解决方案2】：

您可以在上传到 Cloudinary 之前检查空文件，如果没有文件则不上传到 Cloudinary，或者您可以在每次没有文件上传时使用默认图像而不是创建 Blob。

【讨论】：