readFileSync 和 readAsDataURL 有什么区别？

Question

注意：这不是生产应用程序。这是我正在制作的一个小应用程序，用于探索从数据库中选择、打开、保存和读取图像的功能。

我不知道应该调用什么方法来获取正确的缓冲区数据以将图像存储在 mongodb 中。 （我知道 mongoDB 对文档有 16mb 的限制）

在我的应用程序中，我希望用户能够从他们电脑上的文件中选择图像，为用户提供图像预览，然后当用户点击提交时（此处未显示）将图像保存到 mongodb

我知道当用户点击“选择文件”按钮时，我可以得到这样的文件：

    const file = event.target.files[0]

    if (!file) {
        // user has hit the cancel button
        return;
      }        

    //console.log(file);

我可以获得有关文件的信息：

    console.log(file.type);
    console.log(file.size);

这是读取图像的方式：

    let fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = (e) =>{
        this.productImageAdd(e.target.result);
    }

这就是图像在（反应）组件状态下的存储方式

productImageAdd = (file) => {

    let temp = this.state["filesArray"] || [];
    temp.push(file);
    this.setState({"filesArray": temp});
}

这是我的组件的状态

this.state = {
  filesArray: [],
};

在另一个组件中，我获取所有图像的列表，然后将它们映射到一个项目以进行显示：

return filesArray.map((file, index) => (
  <FileDropZoneItem key={index} id={index} file={file} />
));

在 FileDropZoneItem 中，这是“预览”图像的方式：

    return (
        <li className="flex-item ">
          <img src={file} width="200" height="200"/>
        </li>
    );

我看到了这个 stackoverflow 问题，我正朝着将图像存储在 MongoDB 中的方向前进：

Store an image in MongoDB using Node.js/Express and Mongoose

在那篇文章中，他们的架构是这样的：

var schema = new Schema({
    img: { data: Buffer, contentType: String }
});

他们像这样存储图像：

var A = mongoose.model('A', schema);
var a = new A;
a.img.data = fs.readFileSync(imgPath);
a.img.contentType = 'image/png';

但我真的不知道 fs.readFileSync 和 fr.readAsDataURL 之间的区别。

将使用 fr.readAsDataURL 存储到 mongodb 还是我需要 fs.readFileSync ？

我也看到了：Difference between readAsBinaryString() and readAsDataURL() in HTML5 FileReader API

Answer 1

来自 MongoDB 手册 GridFS GridFS 使用两个集合来存储文件。一个集合存储文件块，另一个存储文件元数据。 GridFS 集合部分详细描述了每个集合。

参考你可以阅读Storing images in MongoDB

readAsDataURL 允许将图像存储在编码为 base64 字符的 JSON 文档中。考虑到产品图片的大小，200px x 200px 似乎是您的 hello world 应用的最佳选择。

readFileSync 可能会在像 Nodejs 这样的服务器中针对图像处理行为出现阻塞问题，并读取二进制文件以将其存储为 Binary Data。

IMO 最好的解决方案是不要使用图像处理使 mongoDB 和 Nodejs 过载，并且仅将图像的 URL 存储在 mongoDB 文档中，将图像服务过程留给像 nginx 这样的代理。

Gridfs option 取决于使用的驱动程序。以下是使用自己的阅读器的 Nodejs 中使用的 Gridfs：

fs.createReadStream('./meistersinger.mp3').
pipe(bucket.openUploadStream('meistersinger.mp3')).