【问题标题】:NodeJS/React: Taking a picture, then sending it to mongoDB for storage and later displayNodeJS/React:拍照,然后发送到 mongoDB 存储,稍后显示
【发布时间】: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. 稍后,客户可能会请求将成为帖子一部分的图像(即,推文可以有图像)。这将在网站上显示图像。

任何帮助将不胜感激,因为我觉得我看到的库越多,我就越困惑!

【问题讨论】:

    标签: node.js mongodb reactjs


    【解决方案1】:

    根据您的问题,我知道您将图像存储在数据库本身中。

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

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

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

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

    【讨论】:

    • 嗨!将实际照片发送到后端的最佳方式是什么?目前它以 Blob 形式提供给我 - 我需要以某种方式对其进行转换吗?
    • 否,可以直接存储为jpeg/jpg/png格式。购买您的内容类型应为multipart/form-data。检查此链接scotch.io/tutorials/express-file-uploads-with-multer
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-28
    • 2012-12-20
    • 1970-01-01
    • 2018-08-20
    相关资源
    最近更新 更多