使用axios上传文件并传递参数 multer模块无法接收
html
<form>
<input type="file" name="mypic" id="up">
<input type="button" value="视频上传" @click="go($event)">
<form>
后台
data:{
user:""
}
go(e){
e.preventDefault()
var up=document.getElementById("up");
var postdata=new FormData()
// var postdata=`file=${up.files[0]}` 上传表单可用该字符串拼接,但文件不可以
postdata.append("uid",this.user) //数据收不到
postdata.append("file",up.files[0]) //文件可收到
// postdata.append("title",)
var config={
headers:{
"Content-Type":"multipart/form-data"
}
}
axios.post("http://127.0.0.1:5050/video/party",postdata,config).then(res=>{
console.log(res.data)
})
}
multer使用的格式为 multipart/form-data axios 默认格式为application/json 虽然改了axios格式但multer模块还是无法接收参数
若服务器端非得使用multer模块,HTML做修改才可接收
<form action="http://...." method="post" entype="multipart/form-data">
<input type="file" name="mypic">
<input type="hidden" name="user" v-model="user">
<input type="submit" value="点击上传">
</form>
若非要使用axios传参,那么服务器端改用connect-multiparty模块才可接收参数
npm install connect-multiparty
----------------------------
某路由下
const multiparty=require("connect-multiparty")
var tiparty=multiparty=({dest:"./public/....."}) //设置文件保存的路径
router.post("/party",(req,res)=>{
console.log(req.body,req.files)
})
这么一来axios传参服务器端就可接收了