图片未显示在 sails.js 视图中

Question

我的资产文件夹：

assets  
     | images  
            | media  
                  | book  
                        | pictures

我想在上面的路径中上传图书图片时创建新书，但是当我尝试在视图中显示该图片时，该图片无法显示，也没有错误。
我的代码是：

//BookController
create: function (request, response, next) {
var title = request.body.title;
var subject = request.body.subject;
var brief = request.body.brief;
var author = request.body.author;
var origin_pic_name = null;

request.file('pic').upload({
  dirname: '../../assets/images/media/book/pictures/',
},function (err, file) {
  if(err) console.log(err);
  origin_pic_name = file[0]['fd'].split('\').reverse()[0] ;

  Book.create({title:title,subject:subject,brief:brief,author:author,pic:origin_pic_name}).exec(function (err) {
    if(err) response.end(500, {error: 'Database Error'});
    response.redirect('/');
  });

});},  

index : function (request, response, next) {
Book.find({}).exec(function (err, books) {
  if(err) response.end(500, {error: 'Database Error'});
  response.view('book/index', {books:books});
});},  

//my index.ejs
<ol>
<% books.forEach(function (value) {%>
  <h3><li> <%= value.title %></li></h3>
  <ul><%= value.author %></ul>
  <ul><%= value.subject %></ul>
  <ul><%= value.brief %></ul>
  <ul><img src="/images/media/book/pictures/<%= value.pic %>"/></ul>
<% })%>
</ol>

谢谢

Answer 1

开箱即用，sails 在 sails 提升过程中缓存资产。要解决此问题，对于文件上传，您可以更改控制器以在上传后立即复制文件。

这里是您如何使用当前控制器执行此操作的示例。您可能需要编辑目录字符串以满足您的需要。

// BookController
create: function (request, response, next) {
    var title = request.body.title;
    var subject = request.body.subject;
    var brief = request.body.brief;
    var author = request.body.author;
    var origin_pic_name = null;

    request.file('pic').upload({
        dirname: '../../assets/images/media/book/pictures/',
    },function (err, file) {
        if(err) console.log(err);

        origin_pic_name = file[0]['fd'].split('\').reverse()[0];

        // Variable to hold the current directory
        var currentDir = '../../assets/images/media/book/pictures/' + origin_pic_name;

        // Variable to hold the temp directory
        var tempDir = '.tmp/public/images/media/book/pictures/' + origin_pic_name;

        // copy the image from the current directory to the temp to the temp folder
        fs.createReadStream(currentDir).pipe(fs.createWriteStream(tempDir));

        Book.create({title:title,subject:subject,brief:brief,author:author,pic:origin_pic_name}).exec(function (err) {
            if(err) response.end(500, {error: 'Database Error'});
            response.redirect('/');
        });
    });
},

Answer 2

将图像上传到 Sails 时需要非常小心：

问题

Grunt 正在观察一些文件夹的变化，包括 assets 目录和子目录。但这只有在 "Development" 环境中才有可能（已激活，待定）。

解决方案

在您的根目录中创建一个 images/ 目录。
上传图片时，skipper将图片保存在那里。

编写一个 mediaController 来捕获像 /images/media/book/:name 这样的路由，并尝试定位并发送文件：

// MediaController.js
var fs = require('fs');
var path = require('path');

module.exports = {
    get : function(req, res){
        var filepath = req.name.slice(1,req.name.length);

        // remove this Sync to an Async 
        if(fs.existsSync(path.resolve(filepath))){
            return res.sendfile(filepath);
        } else {
            return res.notFound();  
        }
    }
}

//Routes.js
'get /images/books/:name' : 'MediaController.get'

优势

如果需要，您现在可以使用策略限制图像的访问！
更好地处理图像并 100% 控制 fs。适合 DO Spaces，例如...

图片未显示在 sails.js 视图中

picture do not show in sails.js view

sails.js

问题

解决方案

优势