node后台通过multer接收vue+elementui上传的图文表单
·
前端代码:
由于图片和其他内容无法一起提交,new一个新的formDate对象,使用append将图片文件和其他内容加到新的formDate对象,传递给后台。后台从req.body和req.file获取。
<el-form @submit.native.prevent="saveImage" ref="form" :model="image" label-width="80px" >
<el-form-item label="图文标题">
<el-input v-model="image.title"></el-input>
</el-form-item>
<el-form-item label="上传图片">
<el-upload
action="https://localhost:3000/api/image/upload"
list-type="picture-card"
:auto-upload=false
ref="upload"
:http-request="upload"
:on-change="onchange"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
multiple>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="ID">
<el-input v-model="image.id"></el-input>
</el-form-item>
<el-form-item label="文字内容">
<el-input v-model="image.content"></el-input>
</el-form-item>
<el-form-item label="图片作者">
<el-input v-model="image.picture_author"></el-input>
</el-form-item>
<el-form-item label="文字作者">
<el-input v-model="image.text_author"></el-input>
</el-form-item>
<el-form-item label="喜欢数">
<el-input v-model="image.likes"></el-input>
</el-form-item>
<el-form-item label="展示日期">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="image.date" style="width: 100%;"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="内容类型">
<el-select v-model="image.category" placeholder="请选择内容类型">
<el-option label="图文" value="0"></el-option>
<el-option label="阅读" value="1"></el-option>
<el-option label="阅读" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
export default {
data() {
return {
image: {
file: '',
},
dialogImageUrl: "",
dialogVisible: false
}
},
methods: {
// 提交表单
async saveImage() {
console.log(this.image)
const formDate = new FormData()
const file = this.$refs.upload.uploadFiles[0]
console.log('wenjian',file)
const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
formDate.append('file', file.raw)
formDate.append('title', this.image.title)
formDate.append('id', this.image.id)
formDate.append('content', this.image.content)
formDate.append('picture_author', this.image.picture_author)
formDate.append('text_author', this.image.text_author)
formDate.append('likes', this.image.likes)
formDate.append('date', this.image.date)
formDate.append('category', this.image.category)
// formDate.append('body', this.image)
console.log('sdsa',formDate.get('file'))
await this.$http.post('image/upload', formDate, headerConfig)
this.$router.push('/image/index')
this.$message({
message: '发布阅读成功!',
type: 'success'
})
},
// 删除图片
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 显示图片
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//阻止upload的自己上传,进行再操作
onchange(file) {
console.log(file);
//创建临时的路径来展示图片
// var windowURL = window.URL || window.webkitURL;
// this.src=windowURL.createObjectURL(file.raw);
// 将图片放入image表单对象
this.image.file = file
console.log(this.image.file)
// return false;
},
}
}
后台代码:
const imageType = ['image/jpeg', 'image/png', 'image/jpg']
var storage = multer.diskStorage({
// 设置文件路径
destination: function (req, file, cb) {
if (imageType.indexOf(file.mimetype) !== -1) {
cb(null, 'public/images')
}
},
// 制定文件名
filename: function (req, file, cb) {
// 获取后缀名
// console.log(file)
let ext = file.originalname.split('.')[1]
cb(null, file.fieldname + '-' + Date.now() + '.' + ext)
},
// 检查文件大小
fileFilter: (req, file, cb) => {
let { size } = req.file
let isValid =false;
if(!!imageType[file.mimetype] && size < 4 * 1024 * 1024 ){
isValid = true
}
let error = isValid ? null : new Error('尺寸过大!');
cb(error, isValid);
}
})
// multer对象upload
var upload = multer({
storage: storage
})
// 上传文件post方法,image为要上传内容的key值:前后端必须统一
// upload.single()接受一个文件的上传
router.post('/upload', upload.single('file'), (req, res) => {
// 上传图片的信息在req.file中
console.log(req.body)
console.log(req.file)
let { filename } = req.file
let { date } = req.body
// 将图片的静态路径拼接返回
req.body.img_url = 'http://127.0.0.1:3000' + '/public/images/' + filename
console.log(req.body.img_url)
let insert = req.body
console.log(insert)
// 判断当天图片是否存在
image.find({ date: date })
.then((isdate) => {
console.log('查询数据库中是否有', isdate)
if(isdate.length === 0) {
image.insertMany( insert )
.then(() => {
res.send({ err: 0, msg: '上传成功' })
})
.catch((err) => {
res.send({ err: -3, msg: '上传失败' })
console.log(err)
})
} else {
return res.send({ err: -4, msg: '上传失败,数据库中已存在当天内容' })
}
})
.catch(() => {
res.send({ err: -5, msg: '上传内容格式有误' })
})
})
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)