如何将使用 multer 上传的视频文件转换为字符串，以便可以在前端显示

Question

我正在尝试将视频文件上传到前端页面，但它无法正常工作。下面是代码。请让我知道出了什么问题，因为我在路径教程中不断收到错误转换为字符串失败的值。 这是模型架构

//this is the model schema
var mongoose = require("mongoose");

var courseSchema = new mongoose.Schema({
    name: String,
    course: String,
    createdAt: {
        type: Date,
        default: Date.now
    },
    tutorial: String,
    price: String,
    description: String,
    author: {
        id: {
            type: mongoose.Schema.Types.ObjectId,
            ref: "User",
        },
        username: String
    },
    comments: [
        {
            type: mongoose.Schema.Types.ObjectId,
            ref: "Comment"
        }
    ]
});

module.exports = mongoose.model("Course", courseSchema);

这是发帖路线

 //this is the route
    router.post("/", upload.single("tutorial"), function(req, res, next){
        //get data from the form and add it to the course array
        var name        = req.body.name;
        var course      = req.body.course;
        var tutorial    = req.file;
        var price       = req.body.price;
        var description = req.body.description;
        var author = {
            id: req.user._id,
            username: req.user.username
        };
        var newCourse = {name: name, course: course, tutorial: tutorial, price:price, description: description, author: author}
        //Create a new course and save to the database
        Course.create(newCourse, function(err, newlyCreated){
            if(err){
                console.log(err)
            } else {
                //redirect it page back to the courses page
                res.redirect("courses/" + req.body.course);
            }
        });    
    });

这是前端部分。

//this is the frontend
<div class="row container">
                <!-- blog grid -->
                <% courses.forEach(function(course){ %>
                <div class="col-lg-4 col-md-6">
                    <div class="card">
                        <div class="card-header p-0 position-relative">
                            <a href="/courses/<%- course._id %>">
                                <video class="card-img-bottom" src="${req.file.path}" alt="course" controls></video>
                                <span class="post-icon" aria-hidden="true">$<%- course.price %></span>
                            </a>
                        </div>
                        <div class="card-body">
                            <h6 class="text-colors let-spa mb-3"></h6>
                            <h5 class="blog-title card-title font-weight-bold text-bl"><%- course.name %></h5>                          
                            <div class="row mt-5">
                                <div class="col-3 testi-img-res px-2">
                                    <img src="/images/te1.jpg" alt=" " class="img-fluid rounded-circle" />
                                </div>
                                <div class="col-9 w3_testi_grid mt-xl-2 mt-lg-0 mt-md-2 mt-4">
                                    <h5 class="text-colors mb-1"><%- course.author.username %></h5>
                                    <p>Good day Programmers</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <% }); %>                
                <!-- //blog grid -->
            </div>

它只是不断返回这个

    Error: Course validation failed: tutorial: Cast to string failed for value "{
      fieldname: 'tutorial',
      originalname: 'name of the file',
      encoding: '7bit',
      mimetype: 'video/mp4',
      destination: 'public/course_uploads',
      filename: '1626194886684.mp4',
      path: 'public\\course_uploads\\1626194886684.mp4',
      size: 32510498
    }" at path "tutorial"
{
      stringValue: '"{\n' +
        "  fieldname: 'tutorial',\n" +
        "  originalname: '09. Navigation Bar and Menu in CSS.mp4',\n" +
        "  encoding: '7bit',\n" +
        "  mimetype: 'video/mp4',\n" +
        "  destination: 'public/course_uploads',\n" +
        "  filename: '1626194886684.mp4',\n" +
        "  path: 'public\\\\course_uploads\\\\1626194886684.mp4',\n" +
        '  size: 32510498\n' +
        '}"',
      messageFormat: undefined,
      kind: 'string',
      value: [Object],
      path: 'tutorial',
      reason: null
    }
  },
  _message: 'Course validation failed'
}

Answer 1

在你的后端创建 /uploads 文件。

别忘了在你的 index.js 中使用它的文件路径

app.use('/videos', express.static('/uploads))

我使用 /video 作为前缀

然后存储你的文件并使用它的字段名和来自 multer 的原始名称命名它：

${file.fieldname}${path.extname(file.originalname)}

在您的数据库中，将其存储为：http://localhost:5000/videos/${req.file.filename}

使用此网址，您可以在前端访问您的视频。