Question

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

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

上传图片后如何立即显示图片？非常感谢！

Answer 1

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

事情是，在sails lift上，资产被复制（包括目录结构和符号链接）从./assets文件夹到./.tmp/public，可以公开访问。

因此，为了在上传后立即显示您的图片，您基本上需要将其上传到./assets/uploads，而不是./.tmp/public/uploads。

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

Answer 2

虽然这个问题很老，但我想添加一个我刚刚实施的解决方案。

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

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

因为根据默认的Sails设置，您无法直接从 assets 目录访问资产。相反，您必须在 .tmp/public 时访问 Grunt 目录中的现有资产 > sails lift ing

问题

（可用但易失性）如果您在 .tmp/public 内的任何位置上传文件（例如图片）目录，您的文件（图像）将在下一个sails lift
（不可用）如果您在任何其他自定义目录中上传文件，例如：./assets/images，则上传的文件将无法立即生效，但在下一个sails lift它将会能得到的。这没有意义，因为 - 每次文件上传到生产中时都无法重启服务器。

我的解决方案 （说我想在./assets/images dir上传我的图片）

在 image.ext （可用且不稳定）
上传文件说 ./tmp/public/images/image.ext >
在上传完成后，将文件 image.ext 复制到 ./assets/images/*file.ext （面向未来）

<强> CODE

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中都能很好地工作。

由于

Answer 3

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

当然，这会导致您每次升降机航行时将所有上传的文件复制到{{1}}，这可能是您不想要的。要解决这个问题，你可以使用他的答案中张贴的符号链接技巧@bredikhin。

Answer 4

尝试执行以下操作：

npm install grunt-sync --save-dev --save-exact
取消注释，该行：// grunt.loadNpmTasks('grunt-sync'); 通常它接近文件/tasks/config/sync.js的结尾。
lift该应用

返回到Original answer

Answer 5

我正在使用节点版本10.15.0，并且遇到相同的问题。我通过更新到最新版本的node（12.4.0）以及更新了npm和所有节点模块来解决了这一问题。此后，我修复了漏洞（仅运行'npm audit fix'），并修复了将图像上传到资产/图像文件夹时出现的咕unt错误。

Answer 6

试试这个实现

创建一个同步文件的助手

文件同步助手示例

// import in file
const fs = require('fs')

module.exports = {


  friendlyName: 'Upload sync',


  description: '',


  inputs: {
    filename:{
      type:'string'
    }
  },


  exits: {

    success: {
      description: 'All done.',
    },

  },


  fn: async function ({
    filename
  }) {
    var uploadLocation = sails.config.custom.profilePicDirectory + filename;
    var tempLocation = sails.config.custom.tempProfilePicDirectory + filename;

    //Copy the file to the temp folder so that it becomes available immediately
    await fs.createReadStream(uploadLocation).pipe(fs.createWriteStream(tempLocation));
    // TODO
    return;
  }


};

现在调用此助手将您的文件同步到 .temp 文件夹

const fileName = result[0].fd.split("\\").reverse()[0];

//Sync to the .temp folder
await await sails.helpers.uploadSync(fileName);

保存在 env 中的引用


profilePicDirectory:path.join(path.resolve(),"assets/images/uploads/profilePictures/")

tempProfilePicDirectory:path.join(path.resolve(),".tmp/public/images/uploads/profilePictures/"),

也可以试试

process.cwd()+filepath

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

6 个答案: