javascript - 在index.ejs中显示multer(音乐)文件

Question

最近我问了一个关于将通过 multer 上传的文件保存到 mongodb 中的问题。我能够让它工作，但我无法在我的 index.ejs 中显示该文件。例如，我上传了一个音乐文件，当我尝试通过将音频标签包裹在路径上来在 index.ejs 中显示它时，它显示了音频控件，但播放按钮被禁用，并且音量图标上有一个斜线。请查看我的代码。

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;

索引.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>

<%}%>

这是我的 mongo 数据库中的数据

{ "_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 }

Answer 1

尝试改变

  <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>