node中multer模块配合ajax实现文件上传

zengMoodFF

已于 2022-11-23 19:10:08 修改

阅读量125

点赞数

文章标签： ajax javascript jquery node.js

于 2021-10-18 15:19:01 首次发布

本文链接：https://blog.csdn.net/zengMoodFF/article/details/120827147

版权

前端页面:

<body>
    <h2>预览图片</h2>
    <img src="" id="ac">
    <form method="post" enctype="multipart/form-data">
    <input type="file" id="file">
    <br/>
    </form>
    <input type="button" value="上传" style="margin-top: 10px;" id="btn"> 
</body>

前端JavaScript代码:

<script>
    //创建FormData对象
    var filedate=new FormData();
    var file=document.getElementById("file")
    var btn=document.getElementById("btn")
    var ac=document.getElementById("ac")
    //预览图片处理
    file.onchange=function(){
        var afile=file.files[0]
        console.log(afile)
    //重点
    var httpUrl=window.webkitURL.createObjectURL(afile)
    ac.setAttribute("src",httpUrl)
    }
    btn.onclick=function(){
        //创建formdata对象 将file文件追加到formdata对象中
        filedate.append("fileaa",afile)
        var xhr=new XMLHttpRequest();
        xhr.open('post','http://127.0.0.1:1234/ajax')
		//post文件上传不需要设置响应头
        // xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        //向后端发送数据
        xhr.send(filedate)
    }
</script>

后端代码:

var express=require("express")
var fs=require("fs");
var multer=require("multer")
//初始化express框架
var app=express()
//初始化multer上传对象
var upload=multer({dest:'./file/'})

//配置路由
app.get('/',function(request,response){
        response.redirect("/fileajax")
})
app.get('/fileajax',function(request,response){
        fs.readFile('fileajax.html','utf8',function(error,data){
            if(error){
                console.log("读取html文件失败")
                return
            }
            response.send(data.toString())
        })
})
//处理ajaxpost请求
app.post('/ajax',upload.single("fileaa"),function(request,response){
            console.log(request.file)
            var OldPath=request.file.destination+"/"+request.file.filename;
        var NewPath=request.file.destination+"/"+request.file.filename+request.file.originalname;
        fs.rename(OldPath,NewPath,function(){
            console.log("重命名成功")
        })

})
app.listen(1234,function(){
    console.log("服务器已启动")
})

zengMoodFF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node中multer模块配合ajax实现文件上传

前端页面:<body> <h2>预览图片</h2> <img src="" id="ac"> <form method="post" enctype="multipart/form-data"> <input type="file" id="file"> <br/> </form> <input type="button" value="上传"
复制链接

扫一扫