Tim18318741662
无奈白了少年头
采纳率76.9%
2017-03-10 08:06

vue + node 如何实现图片的存取

已采纳

RT,我想做一个博客网站,其中需要用到图片的存取(用户头像,文章图片等)
前端我用的是vue框架,后台使用的是node+express
我的想法是把图片存到本地文件夹中,然后数据库保存图片的绝对路径,然后前端页面需要显示图片时再从数据库中使用绝对路径读取本地图片文件,但我不知道如何实现将图片存储到指定文件夹中。
然后另一个想法是将图片上传到服务器上,使用图片地址来实现图片的存储,但这种方法我不知道怎么找教程,不知道怎么实现
谢谢各位大神了

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • qq_29594393 当作看不见 4年前

    app.use(express.bodyParser({uploadDir:'./uploads'}));

     app.post('/file-upload', function(req, res) {
    
         console.log(req.body);
          console.log(req.files);
    
          console.log(req.files.file_data.path);
        // 获得文件的临时路径
       //var tmp_path = req.files.thumbnail.path;
        var tmp_path = req.files.file_data.path;
       // 指定文件上传后的目录 - 示例为"images"目录。 
       var splitlast=req.files.file_data.name.split('.').length-1;
       var target_path='./userData/'+req.files.file_data.name.split('.')[splitlast];
       fs.exists(target_path, function (exist) {
    
            if(!exist){
                fs.mkdir(target_path,function(err){
                       if (err) {
                           return console.error(err);
                       }
                       console.log("目录创建成功。");
                    });
            }       //true
        });
    
       // 移动文件 
       try{
           fs.rename(tmp_path, target_path, function(err) {
             if (err) throw err;
             // 删除临时文件夹文件, 
             var list;
    
    
    
             if(req.files.file_data.name.split('.')[splitlast]=="xlsx"){
                    list = xlsx.parse(target_path);
               }
             fs.unlink(tmp_path, function() {
                if (err) throw err;
    
                if(!!list){
                    console.log(list);
                     res.send(list);
                     list.map(function(v){
                        console.log(v.name);
                        v.data.map(function(val){
                            console.log(val);
                        });
                     });
                }
                res.send('File uploaded to: ' + target_path + ' - ' + req.files.file_data.size + ' bytes');
    
             });
           });
       }catch(error){
           throw error;
       }
     });;
    

    前台只需要post 这个路劲提交文件就可以了
    这是我用来解析xlsx文件的 .

    点赞 评论 复制链接分享

相关推荐