Question

即使在阅读了许多类似的问题之后，在角度客户端上显示图像的这个问题也让我长时间不安。文件上传成功上传到文件夹，文件详细信息存储在mongodb数据库中。

这是角客户端。加载图像数据服务或工厂后角度v1.6。

$scope.attachImages.push({
    name: attachment.originalName,
    filePath:attachment.upload_path
  })

然后html网页上有我使用ng-src进行图片上传路径。

<div layout = "column" ng-repeat ="image in attachImages">
               <h5>{{image.name}}</h5>
                 <img ng-src="{{image.filePath}}"/>
            </div>

但这是我无法加载图片的错误：

获取http://localhost:3010/client/upload/attachment/lion.jpg 404（不是实测值）

这就是我在express nodejs后端服务器上所做的事情

router.get('/attachments/:cardId', function(req,res){
   //load teh attachemnts from the db... imageId,
   /// To get all the images/files stored in MongoDB
    Attachment.find({card: req.params.cardId}, function(err,images){
         if (err) {
            res.json({"success": false, "message": 'Error finding the attachments'})
         } else {
           res.json({"success": true, "message": images})

//对于单张图片.. router.get（ '/附件/：CardId中/：附件ID'，函数（REQ，RES）{

           Attachment.findOne({_id: req.params.attachmentId}, function(err, image){
                if (err) {
                    res.json({"success": false, "message": 'ERror in finding the image'})
                } else {
                     if (image) { //atleast there z content
                        //set the content-type correctly so our client or browser know how to handle it.
                         res.setHeader('Content-Type', image.mime);
                        //fs.createReadStream(path.join(UPLOAD_PATH, result.filename)).pipe(res);
                         //fs.createReadStream(path.join()).pipe(res);
                          res.send(image.upload_path);
                     }else {
                       res.json({"success": true, "message": 'No image data found'})
                     }
                }
           })

      });

请不要理解任何帮助......然后我将讨论createObjectURL方法，除了乱码阵列数据外，它不会显示任何内容。

Answer 1

我意识到在加载图片时我在filePath上犯了一个错误。最好首先测试是否可以在发送图像之前从上传路径加载浏览器中的图像。只需在加载路由之前放置这个表达式静态处理程序，就可以在试图加载图像一周后拯救我。

app.use(express.static(__dirname + '/client'));
app.use(express.static(__dirname + '/client/upload/attachment'));

然后加载快速路线

//var user = require('./routes/user') //user routes 
board = require('./routes/board'),

然后在角客户端上

if(attachName.match(/\.(jpg|jpeg|gif|png)$/)){ //u borrowed this from helper in nodejs
                                      //console.log('yeah it z the image')
                                      //$scope.attachImages.push(attachment);
                                       $scope.attachImages.push({
                                           name: attachment.originalName,
                                           imageUrl: attachment.upload_path
                                       })

angular客户端无法使用上传路径

1 个答案: