1.get
1.1前端
const url="http://127.0.0.1:3333/";
function getTest(){
let request=new XMLHttpRequest();
request.open("GET",url+"getTest");
request.send();
request.onreadystatechange=function () {
if(request.readyState===4&&200===request.status){
alert(request.responseText);
}
}
}
1.2 node服务端
const express = require('express');
const app=express();
app.all('*', function(req, res,next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
app.get("/getTest",(req,res,next)=>{
res.send("get successfully");
});
app.listen("3333",()=>{
console.log("正在监听3333端口");
});
2.post（json数据）
2.1 前端
setRequestHeader设置contnet-type，在open()之后，在send()之前。
request.open("POST",url+"postTest");
request.setRequestHeader("Content-Type","application/json");
request.send(JSON.stringify(data));
let request=new XMLHttpRequest();
request.open("POST",url+"postTest");
request.setRequestHeader("Content-Type","application/json");
let data={
postData:"from client to server"
};
request.send(JSON.stringify(data));
request.onreadystatechange=function () {
if(request.readyState===4&&200===request.status){
alert(request.responseText);
}
}
2.2node服务端
const express = require('express');
const bodyParser=require('body-parser');
const app=express();
app.use(bodyParser.json()) //JSON解析
.use(bodyParser.urlencoded({extended: true}));
app.all('*', function(req, res,next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
app.get("/getTest",(req,res,next)=>{
res.send("get successfully");
});
app.post("/postTest",(req,res,next)=>{
console.log(req.body);
res.send("post successfully");
});
app.listen("3333",()=>{
console.log("正在监听3333端口");
});
1.本地预览
1.1利用FileReader读取<input>中待上传文件 转码为<img>src地址，以插入图片到页面中
更多关于FileReader的使用可参考：使用FileReader进行文件读取
<input id="fileInput" type="file">
<button id="uploadBtn">点击上传</button>
<img id="img" alt="图片预览" src=""/>
let fileInput=document.getElementById("fileInput");
let uploadBtn=document.getElementById("uploadBtn");
fileInput.onchange=function (event) {
if(!window.FileReader){
alert("该浏览器不FileReader无法上传文件");
return false;
}
let file = event.target.files[0];// 获取input中的文件
let reader = new FileReader();
reader.readAsDataURL(file);// 读取文件为图片src
reader.onload=function (e) {
let img=document.getElementById("img");
img.src=e.target.result;// 设置<img>标签src展示图片
}
}
2.文件上传
2.1单文件上传
2.1.1前端 利用formData上传文件
关于表单以及formData的详细使用参考：表单，FormData 对象
注意<input>从files中获取到的FileList对象是一个带有length属性，key为从0开始递增的对象。
let file=fileInput.files?fileInput.files:[];
if(!file.length)
所以fileInput.files不存在时赋值为[]，以使用.length属性
image.png
image.png
function uploadFile(){
let file=fileInput.files?fileInput.files:[];// 若文件为空则赋值为空数组[]
if(!file.length){
alert("请选择文件");
return false;
}
let data=new FormData();
data.append("file",file[0]);//input可以一次选择多个文件，所以file是数组
let request=new XMLHttpRequest();
request.open("POST",url+'upload/single');
request.send(data);
request.onreadystatechange=function () {
if(request.readyState===4&&request.status===200){
alert("上传成功");
}
}
}
2.1.2服务端
使用multer中间件储存文件。
multer的使用文档
设置文件位置、名称
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// 接收到文件后输出的保存路径（若不存在则需要创建）
cb(null, 'upload/');
},
filename: function (req, file, cb) {
// 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
cb(null, Date.now() + "-" + file.originalname);
}
});
不同文件类型使用不同中间件,例如单个文件
const upload = multer({storage});
upload.single('file')
node代码
const express = require('express');
const bodyParser=require('body-parser');
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// 接收到文件后输出的保存路径（若不存在则需要创建）
cb(null, 'upload/');
},
filename: function (req, file, cb) {
// 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
cb(null, Date.now() + "-" + file.originalname);
}
});
const upload = multer({storage});
const app=express();
app.use(bodyParser.json()) //JSON解析
.use(bodyParser.urlencoded({extended: true}));
app.all('*', function(req, res,next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
next();
});
app.get("/getTest",(req,res,next)=>{
res.send("get successfully");
});
app.post("/postTest",(req,res,next)=>{
console.log(req.body);
res.send("post successfully");
});
app.post("/upload/single",upload.single("file"),(req,res,next)=>{
console.log(req.body);
res.send("post successfully");
});
app.listen("3333",()=>{
console.log("正在监听3333端口");
});
2.2多文件上传
2.2.1前端
<div class="container">
<h1>多文件上传</h1>
<input id="multiFileInput" type="file" multiple><!--多文件上传-->
<button id="multiUploadBtn">点击上传</button>
</div>
function uploadMultiFile(){
let files=multiFileInput.files?multiFileInput.files:[];// 若文件为空则赋值为空数组[]
console.log(files);
if(!files.length){
alert("请选择文件");
return false;
}
let data=new FormData();
for(let index in files)
{
data.append("files",files[index]);
}
let request=new XMLHttpRequest();
request.open("POST",url+'upload/multi');
request.send(data);
request.onreadystatechange=function () {
if(request.readyState===4&&request.status===200){
alert("上传成功");
}
}
}
2.2.2服务端
app.post("/upload/multi",upload.array("files"),(req,res,next)=>{
//console.log(req.body);
res.send("upload files successfully");
});
3.文件类型限制
如图限制之后选文件类型的时不符合相应类型的文件就不会出现在选择框中
如图，可选择资源中仅有文件夹与png类型
参考：HTML <input> accept 属性
image.png
image.png
网友评论