将图像从数据网址上传到Axios？

2023年5月27日 224次阅读

我一直在用这个上传图像文件到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上传数据网址？我是否需要先将图像转换为浏览器内存中的实际“文件”？

最佳答案 这是使用不同语言的下面的线程的副本

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