将数据URL中的图像上传到Axios？

17 浏览
0 Comments

将数据URL中的图像上传到Axios？

我一直使用这段代码将图像文件上传到一个API（Graphcool），一切正常工作：\n

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)
            });
    }

\n在上面的代码中，文件是通过传递的。\n然而，现在我正在使用React Avatar Editor来允许用户裁剪图像并确保它们是方形的：\nhttps://github.com/mosch/react-avatar-editor\n当你从React Avatar Editor访问图像时，它以数据URL的形式呈现（通过Canvas.toDataURL()）。\n我如何使用Axios上传数据URL？我需要先将图像转换为实际在浏览器内存中的\'文件\'吗？

0

1 答案

0 Comments

问题的原因是用户想要使用Axios将数据URL中的图像上传。解决方法是将图像转换为Blob对象，并使用FormData将其附加到Axios的POST请求中。

解决方法的代码如下：

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)
            });
    });
}

用户可以根据自己的项目需求将代码中的`https://api.graph.cool/file/v1/MY-PROJECTID`替换为自己的API地址。

0