nodejs/react:拍照,然后将其发送到MongoDB进行存储,然后显示



我一直在一个小型Twitter网站上工作,以教自己反应。它的进展很好,我想允许用户拍照并将其附加到他们的帖子中。我找到了一个名为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:http://localhost:4000/dacf7a61-f8a7-484f-adf-adf3-d28d28d2369ae8db (或图像本身进入我的数据库,但问题再次不确定是什么正确的方法。

基本上,我想做的是:1.使用React-Chera抓住图片2.将其发送到帖子中/newimage3.然后将图像以某种形式存储在数据库中4.稍后,客户可能会请求将是帖子的一部分的图像(即推文可以具有图像(。然后,这将在网站上显示图像。

任何帮助都将不胜感激,因为我觉得我越来越困惑的图书馆越来越困惑!

从您的问题中,我知道您正在将图像存储在db本身中。

如果我的理解是正确的,那么您正在尝试使用bad approcah。为此

  1. 您需要使用节点应用程序将图像存储在项目目录中。
  2. 需要将图像的路径存储在db。

  3. 使用以下路径可以获取图像并可以在网页上显示。

用于使用nodejs上传图像您可以使用Multer软件包。

相关内容

最新更新