我已经将图像文件上传到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访问图像时,它以数据网址的形式出现(通过Canvas.toDataURL())。
如何使用Axios上传数据网址?我是否需要先将图片转换为实际的文件&#39;在浏览器内存?
答案 0 :(得分:2)
这是使用不同语言的下面线程的副本
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)
});
});
}