html
用的vant的上傳組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入樣式文件 -->
<link rel="stylesheet" >
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
<body>
<div id="app">
<van-uploader multiple :after-read="afterRead" />
</div>
<script>
// 在 #app 標(biāo)簽下渲染一個(gè)按鈕組件
new Vue({
el: '#app',
//template: `<van-button>按鈕</van-button>`
data:{
url:'http://localhost:3003/upImg'
},
methods: {
afterRead(file) {
// 此時(shí)可以自行將文件上傳至服務(wù)器
console.log(file);
let params = new FormData()
if(file instanceof Array){
for(let i=0;i<file.length;i++){
params.append("file"+i,file[i].file)
}
}else{
params.append("file",file.file)
}
let config = {
header:{
"Content-Type":"multipart/form-data"
}
}
axios.post(this.url,params,config).then(res=>{
console.log(res)
}).catch(err=>{
})
}
}
});
// 調(diào)用函數(shù)組件颤介，彈出一個(gè) Toast
vant.Toast('提示');
</script>
</body>
</html>
node
var express = require('express');
var fs = require('fs');
var path = require('path');
var qiniu = require('qiniu');
var qn = require('./qiniuMain')
var app = express();
app.all('*',function(req,res,next){
res.header('Access-Control-Allow-Origin','*');//*表示可以跨域任何域名都行 也可以填域名表示只接受某個(gè)域名
res.header('Access-Control-Allow-Headers','X-Requested-With,Content-Type');//可以支持的消息首部列表
res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');//可以支持的提交方式
res.header('Content-Type','application/json;charset=utf-8');//請(qǐng)求頭中定義的類(lèi)型
next();
});
//結(jié)果包裝函數(shù)
let result = function (obj,bool){
if(bool){
return {status:0,data:obj};
}else{
return {status:1,data:obj};
}
}
//上傳圖片
app.post("/upImg",function(req,routerRes){
try{
qn.upImg(req,function(res){
console.log('res',res);
return routerRes.send('hahhaha')
/*if(res.status == 0){
return routerRes.json(result(res.data,true));
}else{
return routerRes.json(result(res.msg,false));
}*/
});
}catch(err){
if(err){
console.log('trycatch報(bào)錯(cuò)====',err);
}
}
})
var server = app.listen(3003, function() {
var host = server.address().address;
var port = server.address().port;
console.log('running3003');
});
