视频文件上传、下载、回显(代码通过版)、预览

预览

Content-Disposition：这个响应头可以决定内容是 预览 还是 下载

• Content-Disposition: inline
  此时，消息体会以页面的一部分或者整个页面的形式展示。（预览）
• Content-Disposition: attachment
  消息体应该被下载，默认文件名和 url 格式有关。
• Content-Disposition: attachment; filename=“filename.jpg”
  消息体应该被下载，默认文件名可指定。

const user = {
  name: "jeff",
  blogUrl: "..."
}

const contentDispositionInline = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'inline')
  res.send(user)
}

const contentDispositionFilename = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'attachment; filename="chunge.json"')
  res.send(user)
}

const contentDispositionNoFilename = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'attachment')
  res.send(user)
}

下载、回显、上传代码实例

前台:

down(){
 axios({
   url:'http://localhost:3000/down',
   method:"GET",
   responseType:'blob'
 }).then((res)=>{
   // console.log(res.data)
   // this.vUrl='http://localhost:3000'+res.data

 //下载
 // let a = document.createElement('a')
 // a.download = 'test.mp4'
 // a.href = URL.createObjectURL(res.data)
 // document.body.appendChild(a)
 // a.click()
 // URL.revokeObjectURL(res.data)
 // document.body.removeChild(a)

 //播放
   let url=window.URL.createObjectURL(res.data)
   this.src=url
   window.URL.revokeObjectURL(res.data)

 })
},
upload(e){
 console.log(e.target.files[0])
 // let fileReader =new FileReader();
 // fileReader.onload
 const formData=new FormData();

 formData.append('test',e.target.files[0])

 axios({
   url:'http://localhost:3000/upload',
   method:"POST",
   data:formData,
   headers:{
     'Content-Type': 'multipart/form-data'
   }
 }).then((res)=>{
   console.log(res.data)
   this.vUrl='http://localhost:3000'+res.data
 })


}

后台:

Content-Disposition: inline	如果浏览器能直接打开该文件会直接打开，否则触发保存
Content-Disposition: attachment	告诉浏览器以附件的形式发送，会直接触发保存，会以接口的名字作为默认的文件名
Content-Disposition: attachment; filename="xxx.jpg"	告诉浏览器以附件的形式发送，会直接触发保存，filename的值作为默认的文件名

/* eslint-disable @typescript-eslint/no-var-requires */

var express = require("express");
// const bodyParser = require("body-parser");
var multer = require("multer");
var upload = multer({ dest: "upload/" });
const path = require("path");
const fs = require("fs");
var app = express();

var mysql = require("mysql");

app.use((req, res, next) => {
  //设置请求头
  res.set({
    "Access-Control-Allow-Credentials": true,
    "Access-Control-Max-Age": 1728000,
    "Access-Control-Allow-Origin": req.headers.origin || "*",
    "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
    "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
    "Content-Type": "application/json; charset=utf-8",
  });
  req.method === "OPTIONS" ? res.status(204).end() : next();
});

app.use(express.urlencoded());
app.use(express.json());
app.use(express.static(path.join(__dirname, "upload")));
app.use(express.static(path.join(__dirname, "uploads")));



app.post("/upload", upload.single("test"), (req, res) => {
  console.log(req.file);
  // console.log(req.files);
  console.log(req.body);
  console.log(req.body.info);
  const file = req.file;
  if (file) {
    //获取文件后缀
    // var fileNameArr = file.originalname.split(".");
    // var suffix = fileNameArr[fileNameArr.length - 1];
    //文件重命名
    // fs.renameSync(
    //   "./uploads/" + file.filename,
    //   `./uploads/${"jeff" + file.originalname}`
    // );
    fs.renameSync(
      "./upload/" + file.filename,
      `./upload/${"jeff" + file.originalname}`
    );
  }

  res.send(`/jeff${file.originalname}`);
});

//返回blob,可用于下载和播放
app.get("/down", (req, res) => {
  res.writeHead(200, {
    "Content-Type": "application/octet-stream", //告诉浏览器这是一个二进制文件
    "Content-Disposition": "attachment; filename=jeff.mp4", //告诉浏览器这是一个需要下载的文件
  }); //设置响应头
  var readStream = fs.createReadStream("./upload/jeff.mp4"); //得到文件输入流

  readStream.on("data", (chunk) => {
    res.write(chunk, "binary"); //文档内容以二进制的格式写到response的输出流
  });
  readStream.on("end", () => {
    res.end();
  });
});

app.listen(3000, () => {
  console.log("服务器已启动");
});