Question

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

我不知道应该调用哪种方法来获取正确的Buffer数据以将图像存储在mongodb中。（我知道mongoDB的文档限制为16mb）

在我的应用中，我希望用户能够从其PC上的文件中选择图像，为用户提供图像的预览，然后在用户单击“提交”（此处未显示）时将图像保存到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似乎是您好世界应用的最佳选择。

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

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

Gridfs option取决于所使用的驱动程序。以下是Gridfs在使用自己的读取器的Node.js中的使用：

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

readFileSync和readAsDataURL有什么区别？

1 个答案: