node express的ajax上传

Bertha 。 2021-07-24 13:54 355阅读 0赞

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>
        
       	<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>

路由: