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.为了 方便 我都是同步写入的 大家也可用异步的方式写入 下面就是前台代码了 前台代码简单多了
我监听的是 5050端口 别忘了是post方法 和 enctype="multipart/form-data" 否则资源上传不到 服务器端
最后祝大家一次性上传成功！！
