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服務(wù)端
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("正在監(jiān)聽3333端口");
});
2.post（json數(shù)據(jù)）
2.1 前端
setRequestHeader設(shè)置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服務(wù)端
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("正在監(jiān)聽3333端口");
});
1.本地預(yù)覽
1.1利用FileReader讀取<input>中待上傳文件 轉(zhuǎn)碼為<img>src地址土匀，以插入圖片到頁面中
更多關(guān)于FileReader的使用可參考：使用FileReader進(jìn)行文件讀取
<input id="fileInput" type="file">
<button id="uploadBtn">點(diǎn)擊上傳</button>
<img id="img" alt="圖片預(yù)覽" 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;// 設(shè)置<img>標(biāo)簽src展示圖片
}
}
2.文件上傳
2.1單文件上傳
2.1.1前端 利用formData上傳文件
關(guān)于表單以及formData的詳細(xì)使用參考：表單，F(xiàn)ormData 對(duì)象
注意<input>從files中獲取到的FileList對(duì)象是一個(gè)帶有l(wèi)ength屬性形用，key為從0開始遞增的對(duì)象就轧。
let file=fileInput.files?fileInput.files:[];
if(!file.length)
所以fileInput.files不存在時(shí)賦值為[]，以使用.length屬性
image.png
image.png
function uploadFile(){
let file=fileInput.files?fileInput.files:[];// 若文件為空則賦值為空數(shù)組[]
if(!file.length){
alert("請(qǐng)選擇文件");
return false;
}
let data=new FormData();
data.append("file",file[0]);//input可以一次選擇多個(gè)文件田度，所以file是數(shù)組
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服務(wù)端
使用multer中間件儲(chǔ)存文件妒御。
multer的使用文檔
設(shè)置文件位置、名稱
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// 接收到文件后輸出的保存路徑（若不存在則需要?jiǎng)?chuàng)建）
cb(null, 'upload/');
},
filename: function (req, file, cb) {
// 將保存文件名設(shè)置為 時(shí)間戳 + 文件原始名镇饺，比如 151342376785-123.jpg
cb(null, Date.now() + "-" + file.originalname);
}
});
不同文件類型使用不同中間件,例如單個(gè)文件
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) {
// 接收到文件后輸出的保存路徑（若不存在則需要?jiǎng)?chuàng)建）
cb(null, 'upload/');
},
filename: function (req, file, cb) {
// 將保存文件名設(shè)置為 時(shí)間戳 + 文件原始名乎莉，比如 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("正在監(jiān)聽3333端口");
});
2.2多文件上傳
2.2.1前端
<div class="container">
<h1>多文件上傳</h1>
<input id="multiFileInput" type="file" multiple><!--多文件上傳-->
<button id="multiUploadBtn">點(diǎn)擊上傳</button>
</div>
function uploadMultiFile(){
let files=multiFileInput.files?multiFileInput.files:[];// 若文件為空則賦值為空數(shù)組[]
console.log(files);
if(!files.length){
alert("請(qǐng)選擇文件");
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服務(wù)端
app.post("/upload/multi",upload.array("files"),(req,res,next)=>{
//console.log(req.body);
res.send("upload files successfully");
});
3.文件類型限制
如圖限制之后選文件類型的時(shí)不符合相應(yīng)類型的文件就不會(huì)出現(xiàn)在選擇框中
如圖，可選擇資源中僅有文件夾與png類型
參考：HTML <input> accept 屬性
image.png
image.png
