what is the difference between readFileSync and readAsDataURL?
注意:这不是生产应用程序。这是我正在开发的一个小应用程序,用于探索从数据库中选择,打开,保存和读取图像的功能。
我不知道应该使用哪种方法来获取正确的Buffer数据以将图像存储在mongodb中。 (我知道mongoDB的文档限制为16mb)
在我的应用中,我希望用户能够从其PC上的文件中选择图像,为用户提供图像的预览,然后在用户单击"提交"(此处未显示)时将图像保存到mongodb中
我知道当用户单击"选择文件"按钮时,我可以得到如下文件:
1 2 3 4 5 6 7 8 | const file = event.target.files[0] if (!file) { // user has hit the cancel button return; } //console.log(file); |
我可以获取有关文件的信息:
1 2 | console.log(file.type); console.log(file.size); |
这是读取图像的方式:
1 2 3 4 5 | let fr = new FileReader(); fr.readAsDataURL(file); fr.onload = (e) =>{ this.productImageAdd(e.target.result); } |
这是在(反应)组件状态下存储图像的方式
1 2 3 4 5 6 | productImageAdd = (file) => { let temp = this.state["filesArray"] || []; temp.push(file); this.setState({"filesArray": temp}); } |
这是我组件的状态
1 2 3 | this.state = { filesArray: [], }; |
在另一个组件中,我获得了所有图像的列表,然后将它们映射到要显示的项目:
1 2 3 | return filesArray.map((file, index) => ( <FileDropZoneItem key={index} id={index} file={file} /> )); |
在FileDropZoneItem中,这是"预览"图像的方式:
1 2 3 4 5 6 7 | return ( <li className="flex-item"> <img src={file} width="200" height="200"/> </li> ); |
我看到了这个stackoverflow问题,我正在朝着将图像存储在MongoDB中的方向迈进:
使用Node.js / Express和Mongoose将图像存储在MongoDB中
在那篇文章中,他们的架构是这样的:
1 2 3 | var schema = new Schema({ img: { data: Buffer, contentType: String } }); |
然后他们像这样存储图像:
1 2 3 4 | 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?
我还看到:HTML5 FileReader API中的readAsBinaryString()和readAsDataURL()之间的区别
来自MongoDB手册GridFS
GridFS使用两个集合来存储文件。一个集合存储文件块,另一个集合存储文件元数据。 GridFS集合一节详细描述了每个集合。
作为参考,您可以阅读在MongoDB中存储图像
readAsDataURL允许将图像存储在编码为base64字符的JSON文档中。考虑到产品图片的大小,200px x 200px似乎是您好世界应用程序的最佳选择。
readFileSync可能会在服务器(例如Node.js)中出现阻塞问题,以处理图像,并读取二进制文件以将其存储为二进制数据。
IMO最好的解决方案是不要在mongoDB和Nodejs上进行图像处理,并且仅将图像的URL存储在mongoDB文档中,而将图像服务进程留给像nginx这样的代理。
Gridfs选项取决于所使用的驱动程序。以下是Gridfs在使用自己的读取器的Node.js中的使用:
1 2 | fs.createReadStream('./meistersinger.mp3'). pipe(bucket.openUploadStream('meistersinger.mp3')). |