在我的应用程序中,我已将上传的图像存储到文件夹./assets/uploads。我正在使用easyimage和imagemagick来存储图像。
在我的应用程序中,上传图像后,它应显示新上传的图像。但即使刷新页面也不会显示。但是当我举起风帆时,会显示图像。
如何在上传图像后立即显示图像?非常感谢!
这是一个完全正常的情况,因为Sails使用资产的方式。
问题是,在sails lift
上,资产被复制(包括目录结构和符号链接)从./assets
文件夹复制到./.tmp/public
,后者可以公开访问。
因此,为了在上传后立即显示您的图像,您基本上需要将它们上传到./assets/uploads
而不是./.tmp/public/uploads
。
现在唯一的问题是每次应用程序重新启动时都会重写./.tmp
文件夹,并且在./tmp/...
中存储上传会使它们在每次sails lift
之后被删除。这里的解决方案是存储上传,例如,./uploads
,并有一个指向./assets/uploads
的符号链接../uploads
。
虽然这个问题已经很老了,但我想添加一个我刚才实现的解决方案。
今天我花了近4个小时尝试所有这些解决方案。但没有人帮助。我希望这个解决方案可以节省别人的时间。
为什么上传到任何自定义目录后图像无法立即显示?
因为根据默认的Sails设置,您无法直接从
assets
目录访问资产。相反,您必须访问由.tmp/public
在Grunt
时带到sails lift
目录的现有资产
问题
.tmp/public
目录中的任何位置上传文件(例如图像),您的文件(图像)将在下一个sails lift
上删除./assets/images
,则上传的文件将不会立即可用,但在下一个sails lift
中它将可用。这没有意义,因为 - 每次文件上传到生产中时都无法重启服务器。我的解决方案(说我想在./assets/images
目录上传我的图像)
image.ext
在./tmp/public/images/image.ext
(可用和易失性)image.ext
的副本复制到./assets/images/*file.ext
(面向未来)码
var uploadToDir = '../public/images';
req.file("incoming_file").upload({
saveAs:function(file, cb) {
cb(null,uploadToDir+'/'+file.filename);
}
},function whenDone(err,files){
if (err) return res.serverError(err);
if( files.length > 0 ){
var ImagesDirArr = __dirname.split('/'); // path to this controller
ImagesDirArr.pop();
ImagesDirArr.pop();
var path = ImagesDirArr.join('/'); // path to root of the project
var _src = files[0].fd // path of the uploaded file
// the destination path
var _dest = path+'/assets/images/'+files[0].filename
// not preferred but fastest way of copying file
fs.createReadStream(_src).pipe(fs.createWriteStream(_dest));
return res.json({msg:"File saved", data: files});
}
});
我根本不喜欢这个解决方案,但它节省了我更多的时间,它在dev和prod ENV中都能很好地工作。
谢谢
Sails使用grunt
来处理资产同步。默认情况下,grunt-watch
任务会忽略空文件夹,但只要文件夹中至少有一个文件,它就会始终同步它。因此,如果您打算使用默认的静态中间件来为上传的文件提供服务,那么这里最快的解决方案就是确保在执行assets/uploads
时,sails lift
文件夹中始终至少有一个文件。只要是这种情况,uploads
文件夹将始终同步到您的.tmp/public
文件夹,随后上传到它的任何内容都将自动复制并立即可用。
当然,这会导致所有上传的文件在每次你的电梯Sails时被复制到.tmp/public
,这可能是你不想要的。要解决这个问题,你可以使用他的答案中贴出的符号链接技巧@bredikhin。
尝试这样做:
npm install grunt-sync --save-dev --save-exact
// grunt.loadNpmTasks('grunt-sync');
通常它接近文件/tasks/config/sync.js
的末尾。lift
应用程序再次我使用的是节点版本10.15.0,我遇到了同样的问题。我通过更新到当前版本的节点(12.4.0)并更新了npm和所有节点模块来解决了这个问题。在此之后,我修复了漏洞(只运行'npm audit fix'),修复了将图像上传到assets / images文件夹时出现的grunt错误。