在sails.js中上传后,图像没有立即显示

问题描述 投票:6回答:5

在我的应用程序中,我已将上传的图像存储到文件夹./assets/uploads。我正在使用easyimage和imagemagick来存储图像。

在我的应用程序中,上传图像后,它应显示新上传的图像。但即使刷新页面也不会显示。但是当我举起风帆时,会显示图像。

如何在上传图像后立即显示图像?非常感谢!

sails.js
5个回答
4
投票

这是一个完全正常的情况,因为Sails使用资产的方式。

问题是,在sails lift上,资产被复制(包括目录结构和符号链接)从./assets文件夹复制到./.tmp/public,后者可以公开访问。

因此,为了在上传后立即显示您的图像,您基本上需要将它们上传到./assets/uploads而不是./.tmp/public/uploads

现在唯一的问题是每次应用程序重新启动时都会重写./.tmp文件夹,并且在./tmp/...中存储上传会使它们在每次sails lift之后被删除。这里的解决方案是存储上传,例如,./uploads,并有一个指向./assets/uploads的符号链接../uploads


1
投票

虽然这个问题已经很老了,但我想添加一个我刚才实现的解决方案。

今天我花了近4个小时尝试所有这些解决方案。但没有人帮助。我希望这个解决方案可以节省别人的时间。

为什么上传到任何自定义目录后图像无法立即显示?

因为根据默认的Sails设置,您无法直接从assets目录访问资产。相反,您必须访问由.tmp/publicGrunt时带到sails lift目录的现有资产

问题

  1. (可用但是易失性)如果您在.tmp/public目录中的任何位置上传文件(例如图像),您的文件(图像)将在下一个sails lift上删除
  2. (不可用)如果您在任何其他自定义目录中上传文件 - 例如:./assets/images,则上传的文件将不会立即可用,但在下一个sails lift中它将可用。这没有意义,因为 - 每次文件上传到生产中时都无法重启服务器。

我的解决方案(说我想在./assets/images目录上传我的图像)

  1. 上传文件说image.ext./tmp/public/images/image.ext(可用和易失性)
  2. 在上传完成后,将文件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中都能很好地工作。

谢谢


0
投票

Sails使用grunt来处理资产同步。默认情况下,grunt-watch任务会忽略空文件夹,但只要文件夹中至少有一个文件,它就会始终同步它。因此,如果您打算使用默认的静态中间件来为上传的文件提供服务,那么这里最快的解决方案就是确保在执行assets/uploads时,sails lift文件夹中始终至少有一个文件。只要是这种情况,uploads文件夹将始终同步到您的.tmp/public文件夹,随后上传到它的任何内容都将自动复制并立即可用。

当然,这会导致所有上传的文件在每次你的电梯Sails时被复制到.tmp/public,这可能是你不想要的。要解决这个问题,你可以使用他的答案中贴出的符号链接技巧@bredikhin。


0
投票

尝试这样做:

  • npm install grunt-sync --save-dev --save-exact
  • 取消注释该行:// grunt.loadNpmTasks('grunt-sync');通常它接近文件/tasks/config/sync.js的末尾。
  • lift应用程序再次

回到Original answer


0
投票

我使用的是节点版本10.15.0,我遇到了同样的问题。我通过更新到当前版本的节点(12.4.0)并更新了npm和所有节点模块来解决了这个问题。在此之后,我修复了漏洞(只运行'npm audit fix'),修复了将图像上传到assets / images文件夹时出现的grunt错误。

© www.soinside.com 2019 - 2024. All rights reserved.