Node实现文件（图片、音/视频等）上传

欢迎访问我的个人博客

项目地址

GitHub
码云

项目描述

使用 multer 中间件来储存上传的文件
支持自定义保存到哪个文件目录下

文件上传功能的完整代码

后端

const express = require('express');
const app = express();
const bodyParser = require("body-parser");
const multer = require("multer");
const fs = require('fs');
const path = require('path');// 设置接口的请求头
app.all("/api/*", function (req, res, next) {res.header("Access-Control-Allow-Origin", "*"); // * 表示可以跨域res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Authorization");res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");res.header("X-Powered-By", "3.2.1");res.header("Content-Type", "application/json;charset=utf-8");next();
});// 设置强缓存
app.use('*', (req, res, next) => {res.setHeader('Cache-Control', 'max-age=10'); // 设置缓存时长 = 当前时间 + max-age；优先级比Expires高res.setHeader('Expires', new Date(Date.now() + 10).toUTCString()); // 兼容低版本浏览器的缓存时长next();
})// 使用 body-parser 中间件，limit：支持最大上传文件的大小
app.use(bodyParser.urlencoded({ limit: "20mb", extended: false }));
app.use(bodyParser.json({ limit: "20mb" }));// resource目录下的资源，设置可以静态访问
app.use("/resource", express.static(path.join(__dirname, "/resource")));// 储存文件
const storageFile = multer.diskStorage({//设置上传后文件路径destination: function (req, file, cb) {// 要将文件保存到哪个文件夹下面const folderName = (req.query.folderName || 'temp').trim();// 保存的目录路径const savePath = `./resource/${folderName}`;// 判断目录路径是否存在，不存在就创建一个目录const isExists = fs.existsSync(savePath);if (!isExists) {fs.mkdir(savePath, function (err) {if (err) {cb(null, `./resource/temp`);} else {cb(null, savePath);}})} else {cb(null, savePath);}},//给上传文件重命名filename: function (req, file, cb) {const fileFormat = (file.originalname).split(".");const newFileName = Date.now() + "." + fileFormat[fileFormat.length - 1];cb(null, newFileName);}
});const fileUploadAPIUrl = "/api/uploadFile";// 此路径使用multer中间件，后面的 file 是自定义的值
app.use(fileUploadAPIUrl, multer({ storage: storageFile }).array("file"));// 文件上传完成后，会被监听到
app.post(fileUploadAPIUrl, (req, res) => {const fileInfo = req.files[0];if (!fileInfo) {return res.json({fail: true,msg: "文件上传失败"})}return res.json({success: true,msg: "文件上传成功",data: {originalName: Buffer.from(fileInfo.originalname, "latin1").toString("utf8"),fileSize: fileInfo.size,filePath: '/' + fileInfo.path.replace(/\\/g, '/')}})
})const port = 80;
app.listen(port, () => {console.log(`服务已启动，端口号：${port}`);
})

前端

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传</title>
</head><body><input type="file" id="file" onchange="onUploadFile(this)" /><p style="font-size: 11px; color: #f13;">提示：选择完文件后，会立即上传到服务器</p><script src="./axios.min.js"></script><script>function onUploadFile(evt) {const file = evt.files[0];// ===== 文件上传到服务器 =====const fd = new FormData();fd.append('file', file);// 保存到服务端的哪个文件夹下面，可以自由设置，也可以不填const folderName = "images";const prefix = "http://127.0.0.1";axios({method: "POST",url: `${prefix}/api/uploadFile?folderName=${folderName}`,data: fd,headers: {"Content-Type": "multipart/form-data"}}).then(response => {const res = response.data;if (res.fail) {return alert('文件上传失败')}// 插入上传成功的文件链接到页面上const pEle = document.createElement('p');const aEle = document.createElement('a');const path = `${prefix}${res.data.filePath}`;aEle.innerHTML = path;aEle.setAttribute('target', '_blank');aEle.setAttribute('href', path);pEle.appendChild(aEle);document.body.appendChild(pEle);// 清空表单值document.querySelector('#file').value = "";}).catch(err => {console.error(err);});}</script></body></html>

Node实现文件（图片、音/视频等）上传相关推荐

图片和视频的上传（文件上传通用）
流程如下: 1.先引入el-upload 2.调用上传前事件 3.上传前事件中将file文件转formData 4.调用后端oss接口上传文件 5.上传完成后回显数据 6.点击图片/视频预览图片和视 ...
抖音视频批量上传辅助软件
很多做推广的朋友开始把目光从搜索引擎慢慢的移动到了短视频平台,而抖音又是众多短视频平台中,商业推广最适合的平台. 如果通过抖音获客相信每个人都有自己的看法.我总结出两条方式比较适合我们普通的人: 1. ...
实现今日头条-西瓜视频-抖音视频自动化上传（如希望无人值守长期定时执行的话，需自行优化代码）
业务合作请联系:13958075150 [1]首次登录使用selenium登录并将cookies存为文件,实现免密登录,并便于后期维护cookie. # 首次使用selenium登录,并将cookie ...
新浪微博视频批量上传社区投稿工具教程
微博视频批量上传投稿软件[主要功能]: 1.多新浪微博号批量自动登录.自动识别验证码.支持ck批量导入. 2.支持多新浪微博号自动批量上传视频,自动投稿到微博视频社区. 3.高清视频素材批量下载,可以 ...
图片音视频应用开发的工具与服务大礼包
http://digi.163.com/15/0225/17/AJAK1300001664LU.html [IT168 资讯]信息的传递是通过多个渠道的,在各种宽带技术高度发达的今天,人们接受的信息是 ...
抖音开放平台-视频切片-视频分片上传-不合法的参数ID-不合法的对象ID
问题描述 1.最近遇到个问题,做业务需要管理几个抖音账号,用抖音开放平台做分片上传视频,多次返回不合法参数id,提交工单之后给的回复没有任何参考价值. 2.例如视频文件按15M进行切片,调用分片上传初 ...
JS任意截图并上传图片，上传视频、上传文件
** JS截图上传图片 ** 在前端WEB开放过程中,经常使用上传图片.上传视频.上传音频以及上传其他文件等,通常都使用到各种上传插件,但是很多插件只是单纯的上传文件,不具备图片截图,即使有也很传统, ...
AVI文件的音视频数据简析
AVI文件的音视频数据如图是使用AtomicBrowser2(AVI)打开的一个AVI文件: AVI文件从其RIFF标识符后跟的'AVI'开始. 其数据格式如下: 视频音频的放置方式其中LIST ...
php5.3n上传视频,为什么上传抖音视频不清晰
上传抖音视频不清晰的原因是因为视频都是每张静态的照片信息组合而成,但由于算法和编码的不同会导致信息的流失,所以上传抖音视频时由于增加了数据编码而导致不清晰. 很多小伙伴在用抖音拍视频时,总会发现拍的视 ...
thinkphp6+webuploader实现大文件(视频)分片上传/本地保存或上传OSS
thinkPHP6+webuploader分片上传大视频的解决方案: ①能解决视频太大,1G.2G直传服务器压力过大 ②部分追求完美的人不发接受直传,那只能分片上传 ③分片上传是我找到的比较合理的解决 ...

Node实现文件（图片、音/视频等）上传

项目地址

项目描述

文件上传功能的完整代码

后端

前端

Node实现文件（图片、音/视频等）上传相关推荐

最新文章

热门文章