前端、后端node.js文件上传

前端实现文件上传

    <body>
		<!-- 没有设置多选,只能选择一个文件 -->
		<input type="file" id="file"/>
	</body>
	<script>
		// 获取文件选择控件
		var file = document.getElementById('file');
		// 为文件选择控件添加onchanges事件
		// 在用户文件选择时触发
		file.onchange = function(){
			// 创建空的formData
			var formData = new FormData();
			// 将用户选择的文件追加到formData表单对象中
			formData.append('attrName',this.files[0]);
			//	this.files[0] this指向file,用户选择的文件
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			// 只有post方法能实现文件上传
			xhr.open('post','http://localhost:3000/upload')
			// 把文件发送到服务端 发送ajax请求
			xhr.send(formData);
			// 监听服务器端响应给客户端的数据
			xhr.onload = function(){
				// 如果服务器端返回的http状态码为200 请求成功
				if(xhr.status == 200){
					// 将服务器端返回的数据显示在控制台中
					console.log(xhr.responseText);
				}else{
					console.log("上传失败,出错了")
				}
			}
		}
		
	</script>

demo



  
    
    
    
    Document
  
  
    
  
  


上传文件进度条显示

<body>
		<!-- 没有设置多选,只能选择一个文件 -->
		<input type="file" id="file"/>
		<div class="progress">
			<div class="progress-bar" style="width:70%" id="bar">70%</div>
			
		</div>
	</body>
	<script>
		// 获取文件选择控件
		var file = document.getElementById('file');
		var bar = document.getElementById('bar');

		// 为文件选择控件添加onchanges事件
		// 在用户文件选择时触发
		file.onchange = function(){
			// 创建空的formData
			var formData = new FormData();
			// 将用户选择的文件追加到formData表单对象中
			formData.append('attrName',this.files[0]);
			//	this.files[0] this指向file,用户选择的文件
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			// 只有post方法能实现文件上传
			xhr.open('post','http://localhost:4040/upload');
			// onprogress在文件上传的过程中持续触发
			xhr.upload.onprogress = function(ev){
				// ev.loaded 文件已经上传了多少
				// ev.total  上传文件的问大小
				var result = (ev.loaded / ev.total) * 100 + '%';
				// 设置进度条的宽度
				bar.style.width = result;
				// 将百分比显示在进度条中
				bar.innerHTML = result;
				console.log(ev);
			}
			
			// 把文件发送到服务端 发送ajax请求
			xhr.send(formData);
			// 监听服务器端响应给客户端的数据
			xhr.onload = function(){
				// 如果服务器端返回的http状态码为200 请求成功
				if(xhr.status == 200){
					// 将服务器端返回的数据显示在控制台中
					console.log(xhr.responseText);
					console.log('成功')
				}else{
					console.log("上传失败,出错了")
				}
			}
		}
		
	</script>

node.js后端实现文件上传

方法一

const experss = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');
const app = experss();
app.listen(3000, () => {
    console.log(`web服务器工作在3000端口`);
});
//文件上传界面:
app.get('/uploads', (req, res) => {

    res.sendFile(path.join(__dirname, 'users.html'));
});
//处理含有文件上传的表单
app.post('/doupload', (req, res) => {
    let filePath = path.join(__dirname, 'uploads');
    //判断目录或文件是否存在:
    if (!fs.existsSync(filePath)) { //目录不存在时
        fs.mkdirSync(filePath); //创建目录
    }
    //uploadDir:设置文件上传成功后的存放位置
    //初始化
    const form = formidable({ multiples: true, uploadDir: filePath });
    // console.log(form, 333);

    form.parse(req, (err, fields, files) => {
        // console.log(err, fields, files, 111);
        if (err) { //表单处理失败
            res.send('表单处理失败');
        } else { //表单处理成功 
            //获取用户选择的要上传文件的文件名:
            let ufilename = files.pic.originalFilename;
            //获取用户选择的要上传文件的文件扩展名:
            let extNames = path.extname(ufilename);
            // console.log(extNames, 666);
            //使用自已生成新随机文件名:  完整文件名=文件名.扩展名
            //  form表单要设置成enctype="multipart/form-data",pic是文件上传input type="file"的name
            let fullname = `${files.pic.newFilename}${extNames}`
            console.log(fullname);
            //将上传成功后生成的临时文件名改为正式文件名
            fs.renameSync(files.pic.filepath, `${filePath}/${fullname}`);
            res.send('OK')
        }
    });


});

方法二


```javascript
app.post('/upload',(req,res)=>{
	//创建formidable表单解析对象
	const form = new formidadle.IncomingForm();
	//设置客户端上传文件的存储路径
	form.uploadDir = path.join(__dirname,'public','uploads');
	//保留上传文件的后缀名字
	form.keepExtensions = true;
	//解析客户端传递过来的FormData对象
	form.parse(req,(err,fields,files)=>{
		res.send('ok');
	}) 
})

你可能感兴趣的:(node.js,node.js,前端,javascript)