文章目录
预览
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("服务器已启动");
});