javascript - 使用 express 和 multer 上传文件后如何下载？

Question

我已将文件上传到我的后端 filesystem使用 multer我的服务器是 node客户是 react .
我在客户端下载和显示保存的文件时遇到问题 react每当我这样做 res.download(file)它只是在客户端拒绝连接时引发错误。
我的代码如下:
UserToUploadMapping.js

const mongoose = require("mongoose");

const UserToUploadMapping = new mongoose.Schema({
  userId: {
      type:String,
      required:true
  },
  file: {
    type: Object,
    required: true,
  },
  date: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model("UserToUploadMapping", UserToUploadMapping);

上传视频.js

const router = require("express").Router();
const multer = require('multer');
const UserToUploadMapping = require('../models/UserToUploadMapping')

let nameFile = ''
const storage = multer.diskStorage({
    destination:'./Videos',
    filename:(req,file,cb) => {
        console.log(file)
        nameFile = file.originalname + " "+ Date.now()
        cb(null, nameFile)
    }
})

const upload = multer({storage:storage})

router.post('/upload', upload.single('video'), async (req,res,next) => {
    console.log("object")
    const saveMapping = new UserToUploadMapping({
        userId:'123',
        file:req.file,
    })

    await saveMapping.save()

    res.send("Video uploaded")
})

router.get('/download', async(req,res,next) => {
    const x = await UserToUploadMapping.find()
    // res.send(x)
    res.download(x[0].path)
})

module.exports = router;

客户

const fetchVideo = async () => {
  
    const resp = await axios.get(
      "http://localhost:5000/api/user/video/download"
    );
    console.log(resp)
  };

  return (
    <>
      <NavContainer />
      <div className={classes.Post}>
        <Input
          type="file"
          onChange={(e) => uploadVideos(e.target.files)}
          accept="video/mp4"
        />
        {/* <Button onClick={(e) => submitHandler(e)}>Upload</Button> */}
        <video></video>
      </div>
    </>
  );

错误

Answer 1

uploadVideo.js 文件中存在一些问题:

获取 path从数据来看，需要使用x[0].file.path

(基于您在数据库中保存文件的方式)

const saveMapping = new UserToUploadMapping({
        userId:'123',
        file:req.file,
    })

避免关于文件位置的问题uploadVideo.js是和我们运行应用程序的位置，在系统中保存文件时应该使用绝对路径。

(小问题)你的filename函数将给出这样的文件名 video.mp4 1622180824748 .我认为这是更好的“video-1622181268053.mp4”(我们有正确的文件扩展名)

你可以引用这段代码

const router = require("express").Router();
const multer = require('multer');
const UserToUploadMapping = require('../models/UserToUploadMapping')
const path = require('path');
const uploadFolder = path.join(__dirname, "Videos"); // use a variable to hold the value of upload folder

const storage = multer.diskStorage({
    destination: uploadFolder, // use it when upload
    filename: (req, file, cb) => {
        // nameFile = file.originalname + " "+ Date.now() // --> give "video.mp4 1622180824748"
        let [filename, extension] = file.originalname.split('.');
        let nameFile = filename + "-" + Date.now() + "." + extension; // --> give "video-1622181268053.mp4"
        cb(null, nameFile)
    }
})

const upload = multer({ storage: storage })

router.post('/upload', upload.single('video'), async (req, res, next) => {
    const saveMapping = new UserToUploadMapping({
        userId: '123',
        file: req.file,
    })

    await saveMapping.save()

    res.send("Video uploaded")
})

router.get('/download', async (req, res, next) => {
    const video = await UserToUploadMapping.find({});
    res.download(video[0].file.path); // video[0].file.path is the absolute path to the file
})

module.exports = router;