如何在 Sailsjs 的文件夹中提供图像? [英] How to serve images in a folder in Sailsjs?

问题描述

如何在sails.js 中提供一堆图像?假设，我的 API 服务器有一个供用户上传图像的控制器，它存储在服务器中每个用户的文件夹中.

How to serve bunch of images in sails.js? Suppose, my API server has a controller for user, to upload images and it's stored in each users' folder in server.

// Image upload
var userId = req.param('id');
req.file('image').upload({
  maxBytes: 2000000,
  // set custom upload dir path name
  dirname: require('path').resolve(sails.config.appPath, 'assets/images/', userId)
}, function whenDone(err, uploadedFiles){
  if (err) {
      return res.negotiate(err);
  }
  // if no file uploaded, response with error
  if (uploadedFiles.length === 0) {
      return res.badRequest('No file');
  } else {
      User_images.create({
         userId: userId,
         avatarFd: uploadedFiles[0].fd
      })
      .exec(function(err, result){
         if (err) {
            return res.serverError(err);
         } else {
            return res.ok('image saved');
         }
      })
  }

});

基本上，图片位置成功保存在User_images模型中，文件保存在assets/images/{userid}文件夹中.那么，如何将特定用户的所有图像提供给前端应用程序?

Basically, the image location successfully saved in User_images model, and the file saved in assets/images/{userid} folder. So, how can I serve all images of a particular user to a frontend application?

推荐答案

我发现最好的方法是只保存文件名而不是完整的文件描述符.使用上面的代码，您可以使用简单的正则表达式从文件描述符中获取文件名:

I have found the best approach for this is to save just the filename not the full file descriptor. Using your code above you can get the filename from the file descriptor using a simple regex:

// Image Upload
var userId = req.param('id');
req.file('image').upload({
  maxBytes: 2000000,
  // set custom upload dir path name
  dirname: '../../assets/images/'+userId,
}, function whenDone(err, uploadedFiles){
  if (err) {
    return res.negotiate(err);
  }
  // if no file uploaded, response with error
  if (uploadedFiles.length === 0) {
    return res.badRequest('No file');
  } else {
  // Get the file descriptor
  var f = uploadedFiles[0].fd;
  // return just the filename and use this instead
  var filename = f.replace(/^.*[\\\/]/, '');
  User_images.create({
     userId: userId,
     avatarFd: filename
  })
  .exec(function(err, result){
     if (err) {
        return res.serverError(err);
     } else {
        return res.ok('image saved');
     }
  })
  }
});

现在您可以创建一个控制器，通过传入该用户 ID 来返回特定用户的图像，我们称之为 myimages:

Now you can create a controller that returns images for a specific user by passing in that users id, lets call it myimages:

'myimages' : function (req, res) {
  var userId = req.param('id');
  // find images by userId
  User_images.find({userId : userId},function (err, images) {
    if(err) {
      console.log(err);
      return res.serverError('An error occured while finding images');
    }
    if(!images){
      console.log("No Images Found"); 
      return res.notFound();
    }
    res.view({
      images : images
    })
  });
},

在 myimages 视图中，您可以遍历图像，将用户 ID 和文件名附加到图像 src.

In the myimages view, you can then iterate through the images, appending the userId and filename to the image src.

<% _.each(images, function(image) { %>
  <img src="/images/<%= image.userId %>/<%= image.avatarFd %>">
<% }) %>

这篇关于如何在 Sailsjs 的文件夹中提供图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！