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" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
<!-- 引入 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 标签下渲染一个按钮组件
new Vue({
el: '#app',
//template: `<van-button>按钮</van-button>`
data:{
url:'http://localhost:3003/upImg'
},
methods: {
afterRead(file) {
// 此时可以自行将文件上传至服务器
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=>{
})
}
}
});
// 调用函数组件，弹出一个 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','*');//*表示可以跨域任何域名都行 也可以填域名表示只接受某个域名
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');//请求头中定义的类型
next();
});
//结果包装函数
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报错====',err);
}
}
})
var server = app.listen(3003, function() {
var host = server.address().address;
var port = server.address().port;
console.log('running3003');
});
网友评论