form表单上传图片到node.js服务器上

1.上传到node.js服务器上我们先建立一个后台服务器开始之前我们先把环境搭建好

在桌面上建立一个空的文件夹初始化项目

npm init //这个时候会生成一个package.json文件

npm install express //安装express服务器模块

npm install fs // 安装文件处理模块

npm install cors //跨域模块可能用不着但是如果你是aja跨域请求的话就需要了

npm install path //安装路径处理模块

npm install multer //安装文件上传处理模块

2.以上环境都搭配好了就可以写服务器代码了 get请求只能上传 4kb的东西像图片这种大文件我们需要用post请求

var express=require("express");    //导入 express模块
var cors=require("cors");              //导入cors模块
const path=require("path");          //导入path模块
const multer=require("multer");     //导入multer模块
//设置临时目录存放上传的图片
const upload=multer({dest:"tmp/"});
var app=new express();           //实例化express
//支持ajax跨域请求
app.use(cors({
   "Access-Control-Allow-Origin":"*"
}))
app.listen(5050);

app.post("/",upload.single("img"),(req,res)=>{
    let imgFile=req.file;      //获取图片上传的资源
    var tmp=imgFile.path;   //获取临时资源
   let ext=path.extname(imgFile.originalname); //利用path模块获取用户上传图片的后缀名

let newName=""+(new Date().getTime())+Math.round(Math.random()*10000)+ext; //给用户上传的图片重新命名防止重名

let newPath="/images/"+newName; //给图片设置存放目录提前给当前文件夹下建立一个 images文件夹！！！！

let fileData=fs.readFileSync(tmp); //将上传到服务器上的临时资源读取到一个变量里面

   fs.writeFileSync(__dirname+newPath,fileData);          //重新书写图片文件写入到指定的文件夹下
   res.send("写入图片成功!");                                //上传成功之后给客户端响应
})

3.为了方便我都是同步写入的大家也可用异步的方式写入下面就是前台代码了前台代码简单多了

form表单上传图片到node.js服务器上

我监听的是 5050端口别忘了是post方法和 enctype="multipart/form-data" 否则资源上传不到服务器端

最后祝大家一次性上传成功！！

form表单上传图片到node.js服务器上

相关推荐