在index.ejs中顯示multer（音樂）文件

最近我問了一個關於通過multer將上傳的文件保存到mongodb的問題。我能夠得到這個工作，但我無法在我的index.ejs中顯示該文件。例如，我上傳了一個音樂文件，當我試圖通過將音頻標籤包裹在路徑中來顯示index.ejs時，它會顯示音頻控件，但播放按鈕被禁用，並且音量圖標在其上顯示斜線。請參閱我的代碼。在index.ejs中顯示multer（音樂）文件

routes.js

var storage = multer.diskStorage({ 
destination: function (req, file, cb) { 
cb(null, './uploads/'); 
    }, 
filename: function (req, file, cb) { 
    var originalname = file.originalname; 
    var extension = originalname.split("."); 
    filename = Date.now() + '.' + extension[extension.length-1]; 
    cb(null, filename); 
    } 
}); 

router.post('/', multer({storage: storage, dest: './uploads/'}).single('uploads'), function(req,res){ 
    var music = new Music ({ 
    fieldname: req.file.fieldname, 
    originalname: req.file.originalname, 
    encoding: req.file.encoding, 
    mimetype: req.file.mimetype, 
    destination:req.file.destination, 
    filename: req.file.filename, 
    path: req.file.path, 
    size: req.file.size 
    }) 
    music.save(function(err){ 
    if (err){console.log(err)} 
    else { 
     res.redirect('/'); 
    } 
    }) 
});

音樂模式

var mongoose = require('mongoose'); 

var musicSchema = new mongoose.Schema({ 
    fieldname: String, 
    originalname: String, 
    encoding: String, 
    mimeptype: String, 
    destination: String, 
    filename: String, 
    path: String, 
    size: Number, 
    created_at: Date, 
    updated_at: Date 
}); 
var Music = mongoose.model('Music', musicSchema); 

module.exports = Music;

index.ejs

<form action="/" enctype="multipart/form-data" method="post"> 
    <input type="text" name="title"> 
    <input type="file" name="uploads"> 
    <input type="submit" value="Uploads"> 
</form> 

<% for(var i = 0; i < musics.length; i++){ %> 
    <p> <%= musics[i].originalname %> </p> 

    <audio autoplay="autoplay" controls="controls"> 
    <audio controls="controls"> 
    <source src="<%= musics[i].path %>"/> 
    </audio> 

<%}%>

這是我蒙戈DB數據

{ "_id" : ObjectId("576e27051ca343b201992472"), "created_at" : ISODate("2016-06-25T06:39:02.004Z"), "updated_at" : ISODate("2016-06-25T06:39:02.004Z"), "fieldname" : "uploads", "originalname" : "Trance - Tricky Tricky.mp3", "encoding" : "7bit", "destination" : "./uploads/", "filename" : "1466836741963.mp3", "path" : "uploads/1466836741963.mp3", "size" : 3818213, "__v" : 0 }

來源

2016-06-25 Bill

嘗試變換

<audio autoplay="autoplay" controls="controls"> 
    <audio controls="controls"> 
    <source src="<%= musics[i].path %>"/> 
    </audio> 
to 

    <audio autoplay="autoplay"controls="controls"> 
    <source src="<%= musics[i].path %>"/> 
    </audio>

來源

2016-06-25 06:40:18

我試過了自動播放。它現在顯示在index.ejs中，但它不播放歌曲。音頻控件正在顯示，但播放按鈕已禁用，並且音量圖標上有斜槓。 – Bill

在index.ejs中顯示multer（音樂）文件

回答

相關問題