将图像从数据 url 上传到 Axios？答案

【问题标题】：Upload image from data url to Axios?将图像从数据 url 上传到 Axios？
【发布时间】：2018-08-20 01:16:50
【问题描述】：

我一直用这个将图像文件上传到 API (Graphcool)，一切正常：

fileUpload(file) {
        let data = new FormData();
        data.append('data', file);

        axios
            .post(`https://api.graph.cool/file/v1/MY-PROJECTID`, data, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
            .then(res => {
                console.log(res)
            });
    }

在上面的代码中，文件是从<input type="file" /> 传递的

但是现在我使用 React Avatar Editor 来允许用户裁剪图像并确保它们是正方形： https://github.com/mosch/react-avatar-editor

当您从 React Avatar Editor 访问图像时，它以数据 url 的形式出现（通过 Canvas.toDataURL()）。

如何使用 Axios 上传数据 url？我是否需要先将图像转换为浏览器内存中的实际“文件”？

【问题讨论】：

您可以将 dataURI 转换为 blob - stackoverflow.com/questions/12168909/blob-from-dataurl
@Evans，有什么更新吗？

标签： axios todataurl graphcool

【解决方案1】：

这是下面线程的副本，只是用不同的语言

Sending canvas.toDataURL() as FormData

您需要像下面这样更改您的代码

    function fileUpload(canvas) {
        let data = new FormData();
        canvas.toBlob(function (blob) {
            data.append('data', blob);
    
            axios
                .post(`https://api.graph.cool/file/v1/MY-PROJECTID`, data, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                })
                .then(res => {
                    console.log(res)
                });
        });
    }

【讨论】：