5.Vue临时上传文件夹
1.在项目目录中,通过npm install multiparty进行安装必要组件
npm install multiparty --save-dev
2.app.js中添加
app.use(bodyParser({uploadDir:'./uploadtemp'}));//设置上传临时文件夹
//在与app.js同目录下创建uploadtemp文件夹
3.index.js中
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
//-------文件上传------
router.post('/imgupload',function(req,res){
//-----------------------------------------
var form = new multiparty.Form();
//设置编辑
form.encoding = 'utf-8';
//设置文件存储路径
form.uploadDir = "./uploadtemp/";
//设置单文件大小限制
form.maxFilesSize = 2 * 1024 * 1024;
//form.maxFields = 1000; 设置所以文件的大小总和
form.parse(req, function(err, fields, files) {
for(var key in files){
console.log(key+'=='+files[key]);
for(var kk in files[key][0].headers){
console.log(kk+'==='+files[key][0].headers[kk]);
}
}
file1 = files['myimg'];
paraname = file1[0].fieldName; //参数名myimg
originalFilename = file1[0].originalFilename; //原始文件名
tmpPath = file1[0].path;//uploads\mrecQCv2cGlZbj-UMjNyw_Bz.txt
fileSize = file1[0].size; //文件大小
var timestamp=new Date().getTime(); //获取当前时间戳
newPath= './public/images/'+timestamp+originalFilename;
var fileReadStream = fs.createReadStream(tmpPath);
var fileWriteStream = fs.createWriteStream(newPath);
fileReadStream.pipe(fileWriteStream); //管道流
fileWriteStream.on('close',function(){
console.log('copy over');
});
/*
function writeFile(data){
fs.writeFile(newPath,data,function(error){
if(error){
throw error;
}else{
console.log("文件已保存");
}
});
}
fs.readFile(tmpPath,'ascii',function(err, data) {
if (err) {
console.log("读取失败");
} else {
writeFile(data);
}
});
*/
//重命名为真实文件名
/*
fs.rename(tmpPath, newPath, function(err) {
if(err){
console.log('rename error: ' + err);
} else {
console.log('rename ok');
}
});
*/
//删除临时文件夹中的文件
//fs.unlinkSync(tmpPath);
});
//-----------------------------------------
res.send('上传完成');
});
4.客户端
<html>
<head>
<link rel="stylesheet" href='/flex.css'/>
</head>
<body>
<% include header %>
<form enctype="multipart/form-data" method='post' action='/imgupload'>
<table border='1' align='center'>
<tr>
<td>图片上传</td>
</tr>
<tr>
<td>
<input type='file' name='myimg'/>
</td>
</tr>
<tr>
<td align='center'>
<input type='submit' value='上传'/>
</td>
</tr>
</table>
</form>
<% include footer%>
</body>
</html>
如果uploads不是临时文件夹再次安装:
D:\www\nodejs2\blog>npm install body-parser --save-dev
DEMO下载地址:https://dwz.cn/fgXtRtnu
5.Vue临时上传文件夹的更多相关文章
- vue+上传文件夹
在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到 <input type="file" id="filepicker" name=" ...
- 上传文件夹 vue
ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...
- SFTP 上传文件夹
使用sftp上传文件夹时若使用如下命令并不work: put /media/Research/GWAS_Class/* Desktop/ 此时,需要添加一个参数 -r, 另外在目标文件夹下面建立一个同 ...
- 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...
- svs 在创建的时候 上传文件夹 bin obj 这些不要提交
svs 在创建的时候 上传文件夹 bin obj 这些不要提交 右键-去除版本控制并增加到忽略列表
- SpringBoot 上传文件夹
前端代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- oss上传文件夹-cloud2-泽优软件
泽优软件云存储上传控件(cloud2)支持上传整个文件夹,并在云空间中保留文件夹的层级结构,同时在数据库中也写入层级结构信息.文件与文件夹层级结构关系通过id,pid字段关联. 本地文件夹结构 文件 ...
- MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文 ...
- msysgit 上传文件夹,规范化的日常
在我们第一次成功的上传到github之后,要上传文件夹的我们要在msysgit里输入些什么呢? 选择要上传的文件夹前一项右键点击git bash here 进入msysgit后 首先初始化,输入 gi ...
随机推荐
- powerdesigner中实现PDM到MYSQl数据库的转换
一.使用PowerDesigner制作建库脚本 1.设计CDM(Conceptual Data Model) 2.选择 Tools -> Generate Physical Data Model ...
- PC初始化
@charset "utf-8"; /* CSS Document */ html{width:%;font-family: ;padding: ;} a{color:#;text ...
- mysql 添加外键
create table class( cid tinyint unsigned primary key auto_increment, caption varchar(15) not null)en ...
- linux执行系统命令时挂起
现象:使用mock构建时出现挂起现象 1.排除内存不足和构建工作空间所在磁盘分区不足情形: 2.执行任何系统命令异常卡顿 原因: 1.系统根分区空间严重不足: 解决办法: 清理根分区无用文件 1> ...
- 在iOS中将string转成UTF-8编码
在iOS开发中,特别是在对Web服务调用的时候,经常会遇到请求参数为中文的情况,那么这时候就需要将Url转成UTF-8编码才能进行请求.使用stringByAddingPercentEscapesUs ...
- python爬虫 urllib库基本使用
以下内容均为python3.6.*代码 学习爬虫,首先有学会使用urllib库,这个库可以方便的使我们解析网页的内容,本篇讲一下它的基本用法 解析网页 #导入urllib from urllib im ...
- 20172325 2017-2018-2 《Java程序设计》第十一周学习总结
20172325 2017-2018-2 <Java程序设计>第十一周学习总结 教材学习内容总结 Android简介 Android操作系统是一种多用户的Linux系统,每个应用程序作为单 ...
- 最详细的Axure动态面板使用教程
1.打开[Axure]软件,在index文件上新建一个375*667大小的背景矩形并绘制页面. 具体如图所示. 2.在banner的位置上新建一个[动态面板],双击动态面板在其中新建state1.st ...
- 电商类web原型制作分享——美丽说【附源文件】
美丽说是国内白领女性时尚消费品牌,精选上千家优质卖家供应商,为用户提供女装.女鞋.女包.配饰.美妆等品类的优质时尚商品. 此原型模板所用到的组件有搜索框.下拉菜单.输入框.选项卡等.交互动作有切换选项 ...
- c++11 stl 学习之 shared_ptr
shared_ptr智能指针 shared_ptr 的声明初始化方式由于指针指针使用explicit参数 必须显示声明初始化shared_ptr<string> pNico = new s ...