node express的ajax上传

最新推荐文章于 2022-04-07 00:49:27 发布

神奇大叔

最新推荐文章于 2022-04-07 00:49:27 发布

阅读量321

点赞数

分类专栏： node进阶文章标签： nodejs

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104986356

版权

node进阶专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、修改表单form的enctype="multipart/form-data"

2、创建formData对象来接收文件
		(1)dom获取到input表单元素对象,使用onchange监听该元素
		(2)在点击上传文件后,通过this.files[0]获取上传到window中的该文件对象
		(3)let formData=new FormData();每上传一个文件,就要生成一个该对象,否则会因为重名而报错
		(4)formData.append('input表单的name值',文件对象); 将文件追加到formData对象里
		
3、ajax发送请求(express内的public路径已被解析,所以使用public内的资源,只需要'/文件夹/xxx',不需要添加public到url里)

	    $.ajax({
          type:'post',
          url:'/users',
          processData:false,  //不处理数据进程,即不添加任何东西
          contentType:false,  //不解析内容
          data:formData,
          success:function(res){
            console.log(res);
            $('body').append(`<h1>上传成功</h1><img src="${res.url}"/>`)
          }
        })
 
 4、对于路由的后台
 		(1)引入
 			var multer=require('multer');
			var fs=require('fs');
			
		(2)配置multer上传对象
			let upload= multer({dest:"./public/upload"})  目的地配置
			
		(3)路由配置
		
		//ajax接收的路由
		
		router.post('/',upload.single('表单input的name值'),(req,res,next)=>{
			//req.file为上传文件相关信息,上传文件后,文件的名称变成随机值无后缀名,所以要还原成以前的名字
			
			let oldpath=req.file.destination+'/'+req.file.filename;
			let newpath=req.file.destination+'/'+req.file.originalname;
			fs.rename(oldpath,newpath,()=>{
				console.log('重命名成功'+newpath);
			})
			
			res.json({
				success:'ok',
				url:"/upload/"+req.file.originalname
			})
		})
		
		//渲染的路由页面
		
		router.get('/ajax',(req,res)=>{
			res.render('uploadajax.ejs');
		})

5、若要预览
	因为上传的图片是二进制信息,通过window.webkitURL.createObjectURL(文件对象);
	转换成url流,再放进img的src内

代码示例:
ejs页面:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src='/javascripts/jquery-3.4.1.js'></script>
  </head>
  <body>
    <h1>图片上传</h1>
    <!-- 需修改enctype="multipart/form-data" 定义上传类型为文件类型 -->
   	<form action="/users" method="post" enctype="multipart/form-data">
		<input type="file" name='imgfile' id='imgInput'>
		<div class='btn'>上传</div>
    <div class='pre'>
        <h3>图片预览</h3>
        <img src="" alt="">
    </div>
   	</form>
      
   	<script>
      let formData=new FormData();
      let file;

   		$('#imgInput').change(function(e){
        file=this.files[0];
        console.log(file);
        formData=new FormData();
        //将文件追加到formData里
        formData.append('imgfile',file);

        //生成预览图片地址
        let url=window.webkitURL.createObjectURL(file);

        $('.pre>img').attr('src',url);

      })

      $('.btn').click(function(e){
        $.ajax({
          type:'post',
          url:'/users',
          processData:false,
          contentType:false,
          data:formData,
          success:function(res){
            console.log(res);
            $('body').append(`<h1>上传成功</h1><img src="${res.url}"/>`)
          }
        })
      })
   	</script>
  </body>
</html>

路由:

var express = require('express');
var router = express.Router();
var multer=require('multer');
var fs=require('fs');

//配置上传对象
let upload= multer({dest:"./public/upload"})

//ajax请求的路由
router.post('/',upload.single('imgfile'),(req,res,next)=>{
	//req.file为上传文件相关信息,上传文件后,文件的名称变成随机值无后缀名,所以要还原成以前的名字
	console.log(req.file);
	let oldpath=req.file.destination+'/'+req.file.filename;
	let newpath=req.file.destination+'/'+req.file.originalname;
	fs.rename(oldpath,newpath,()=>{
		console.log('重命名成功'+newpath);
	})
	
	res.json({
		success:'ok',
		url:"/upload/"+req.file.originalname
	})
})

//即进入该路由,就会显示上面的ejs页面,从而进行可视化上传操作
router.get('/ajax',(req,res)=>{
	res.render('uploadajax.ejs');
})



module.exports = router;

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node express的ajax上传

1、修改表单form的enctype="multipart/form-data"2、创建formData对象来接收文件路径 (1)dom获取到input表单元素对象,使用onchange监听该元素 (2)在点击上传文件后,通过this.files[0]获取上传到window中的该文件对象 (3)let formData=new FormData();每上传一个文件,就要生成一个该对...
复制链接

扫一扫