Question

我一直在一个类似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 然后，图像将以某种形式存储在数据库中 4.稍后，客户端可以请求将成为帖子一部分的图像（即，推文可以具有图像）。然后，这将在网站上显示图像。

任何帮助都会非常感激，因为我觉得我越来越困惑我看到的库越来越多了！

Answer 1

根据您的问题，我发现您将图像存储在数据库中。

如果我的理解是正确的，那么您正在尝试bad approcah。对于这个

您需要使用节点应用程序将图像存储在项目目录中。
需要在DB中存储图像路径。
使用这些路径可以获取图片并显示在网页上。

使用nodejs上传图片，您可以使用Multer包。

NodeJS / React：拍照，然后将其发送到mongoDB进行存储并稍后显示

1 个答案: