【发布时间】:2018-09-12 14:39:34
【问题描述】:
我一直在开发一个类似 twitter 的小型网站来自学 React。进展相当顺利,我希望允许用户拍照并将其附加到他们的帖子中。我发现了一个名为 React-Camera 的库,它似乎可以做我想做的事——它会打开相机并设法保存一些东西。
我之所以这么说,是因为我对我所保存的内容实际上-做什么-感到非常困惑。这是用于图像捕获的客户端代码,我基本上只是从文档中复制的:
takePicture() {
try {
this.camera.capture()
.then(blob => {
this.setState({
show_camera: "none",
image: URL.createObjectURL(blob)
})
console.log(this.state);
this.img.src = URL.createObjectURL(blob);
this.img.onload = () => { URL.revokeObjectURL(this.src); }
var details = {
'img': this.img.src,
};
var formBody = [];
for (var property in details) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(details[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
fetch('/newimage', {
method: 'post',
headers: {'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'},
body: formBody
});
console.log("Reqd post")
但我实际上在这里保存了什么?为了测试,我尝试将图像添加到站点并设置 src={this.state.img} 但这不起作用。我可以存储这个 blob(例如,blob:http://localhost:4000/dacf7a61-f8a7-484f-adf3-d28d369ae8db) 或图像本身进入我的数据库,但问题再次是我不确定正确的方法是什么。
基本上,我想做的是: 1. 使用 React-Camera 抓图 2. 在帖子中将其发送到 /newimage 3. 然后图像将以某种形式存储在数据库中 4. 稍后,客户可能会请求将成为帖子一部分的图像(即,推文可以有图像)。这将在网站上显示图像。
任何帮助将不胜感激,因为我觉得我看到的库越多,我就越困惑!
【问题讨论】: