正文
vue+jquery使用FormData向后端传递数据和文件，express如何获取
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用multiparty 模块
下载 cnpm install multiparty --save
前端代码:
<template>
<div class="add-area">
<Dialog :msg="msg" :tagClass="tagClass" v-show="dialogHidden"></Dialog>
<div class="top-area">
<span class="iconfont icon-close" @click="close"></span>
</div>
<div class="main-area">
<!-- <form method="post" name="fileinfo" enctype="multipart/form-data" action="http://localhost:3000/add"> -->
<table align="center">
<tr>
<td>简讯标题:</td>
<td><input type="text" style="width: 700px; height: 24px;" id="title" name="title" required="required"></td>
</tr>
<tr>
<td>简讯来源:</td>
<td><input type="text" style="width: 700px; height: 24px;" id="source" name="source" required="required"></td>
</tr>
<tr>
<td>简讯作者:</td>
<td><input type="text" style="width: 700px; height: 24px;" id="author" name="author" required="required"></td>
</tr>
<tr>
<td>简讯内容:</td>
<td><textarea name="content" id="content" cols="30" rows="10" style="width: 700px;" required="required" ></textarea></td>
</tr>
<tr>
<td>上传图片:</td>
<td><input type="file"
name="file"
id="file"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
required="required"
@change="uploading($event)"></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="button" class="like-btn" value="添加文章" @click="addArticle()"/></td>
</tr>
</table>
<!-- </form> -->
</div>
</div>
</template> <script>
import Dialog from "../components/dialog.vue"
export default{
name:"Add",
components:{
Dialog
},
data(){
return{
msg:"出错了",
tagClass:"error",
dialogHidden:false,
// 表单中的数据定义
file:"",
src:""
}
},
methods:{
countTime(){
setTimeout(()=>{
this.dialogHidden=false
},2000)
},
close(){
this.$router.go(-1)
},
uploading(event){
this.file = event.target.files[0];//获取文件
var windowURL = window.URL || window.webkitURL;
this.file = event.target.files[0];
console.log(this.file)
//创建图片文件的url
this.src = windowURL.createObjectURL(event.target.files[0]);
console.log(this.src)
},
addArticle(){
// var form=new FormData(document.forms.namedItem("fileinfo"))
event.preventDefault();
let title=$.trim($("#title").val())
let source=$.trim($("#source").val())
let author=$.trim($("#author").val())
let content=$.trim($("#content").val())
let file=$.trim($("#file").val())
console.log(content)
console.log("文件内容:",file)
console.log(file=="")
console.log($("#file").get(0).files[0])
if(title.length<1){
this.dialogHidden=true
this.countTime()
this.msg="请输入简讯标题"
this.tagClass="error"
return false;
}
if(source.length<1){
this.dialogHidden=true
this.countTime()
this.msg="请输入简讯来源"
this.tagClass="error"
return false;
}
if(author.length<1){
this.dialogHidden=true
this.countTime()
this.msg="请输入作者名称"
this.tagClass="error"
return;
}
if(content.length<1){
this.dialogHidden=true
this.countTime()
this.msg="请输入简讯内容"
this.tagClass="error"
return;
}
if(file == "" || file.length<1){
this.dialogHidden=true
this.countTime()
this.msg="请选择图片文件"
this.tagClass="error"
return;
}
// var form = document.forms.namedItem("fileinfo");
console.log("越过山川")
var formData = new FormData();
console.log("formData:",formData)
console.log(title)
formData.append('title',title)
formData.append('source',source)
formData.append('author',author)
formData.append('content',content)
formData.append('file',this.file)
console.log(formData)//直接输出formData结果是{},可以以下面这种方式查看
console.log(formData.get("title"));
console.log(formData.get("file"));
$.ajax({
url: "http://localhost:3000/add" ,
data:formData,
type:"POST",
contentType:false,
processData:false,
success:res=>{
console.log(res)
},
error:err=>{
console.log(err)
}
}) }
}
}
</script>
express代码:
const express=require("express");
const app=express();
const path=require("path")
const fs=require("fs")
const multiparty=require("multiparty")
const cors=require("cors")
app.use(cors())
// 定义静态资源目录
app.use("/static",express.static(path.join(__dirname,"./public")))
app.listen(3000,()=>{
console.log("app start!")
})
// 获取添加简讯的数据
app.post("/add",(req,res)=>{
let form = new multiparty.Form({uploadDir:"./public"});
form.parse(req,(err,fields,files)=>{
if(err){
console.log("出错了",err)
res.send({
code:400,
msg:"简讯添加失败"
})
}else{
let inputFile =files.file[0]
var uploadPath=inputFile.path;
console.log("文件路径",uploadPath)
console.log(typeof uploadPath)
var arrPath=uploadPath.split("\\")[1]
let dstPath="./public/"+arrPath
fs.rename(uploadPath,dstPath,(err)=>{
if(err){
res.send({
code:400,
msg:"简讯添加失败"
})
}
// 文章图片地址
let newPath="http://localhost:3000/static/"+arrPath
let time=new Date().getTime()
// 文章其他信息
let addData={
title:fields.title[0],
source:fields.source[0],
author:fields.author[0],
content:fields.content[0],
articleImg:newPath,
create_time:time,
love:0,
discuss:0,
sharea:0
}
randomArt.create(addData,(err,data)=>{
if(err){
res.send({
code:400,
msg:"添加简讯失败"
})
}else{
console.log("添加的数据结果:",data)
res.send({
code:200,
msg:"添加简讯成功"
})
}
})
})
}
})
})
mongoose连接文件：dbConn.js代码：
// 连接数据库
const mongoose=require("mongoose"); mongoose.connect("mongodb://localhost:27017/blog",{useNewUrlParser:true},(err)=>{
if(err){
console.log(err)
return;
}
console.log("数据库连接成功")
}) module.exports=mongoose;
模型randomArt.js文件代码:
const mongoose =require("./dbConn.js")
const articleSchema=mongoose.Schema({
title:String,
source:String,
author:String,
articleImg:String,
content:String,
love:{
type:Number,
default:0
},
share:{
type:Number,
default:0
},
discuss:{
type:Number,
default:0
},
create_time:{
type:Date,
default:Date.now()
}
})
module.exports=mongoose.model("randomArt",articleSchema)
