本文最后更新于 131 天前，其中的信息可能已经有所发展或是发生改变。
1、方法一（图片与表单分开，请求2次）
1.1 前台代码
// elementUI表单
<el-form ref="form" class="forms" :model="form">
<div class="title">
<el-input
type="text"
placeholder="请在这里输入标题"
v-model="form.formtitle"
maxlength="48"
show-word-limit
>
</el-input>
</div>
<div class="con">
<div class="toolbar clearfix">
<div class="toolbar-tip"></div>
<ul class="toolbar-group">
<el-upload
action="http://localhost:5000/newtravel/upload"
:before-upload="beforeupload"
:on-change="handleChange"
:show-file-list="false"
:data="form"
>
<li>图片</li>
</el-upload>
</ul>
</div>
<div class="inputcon">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
<el-input
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="form.formconent"
>
</el-input>
</div>
<div class="btns">
<div class="user_accept">
<el-checkbox v-model="isaccept"
>我已阅读并同意
<a href="" title="《马蜂窝游记协议》">《马蜂窝游记协议》</a>
</el-checkbox>
</div>
<el-button type="submit" class="btn_submit" @click="onSumbit"
>发表</el-button
>
<span class="cont">或者</span>
<span class="btn_save">保存草稿</span>
<div class="sync">
<span>同步到：</span>
<ul class="clearfix">
<li>
<a href="javascript:void(0);" title="微博"></a>
</li>
<li>
<a href="javascript:void(0);" title="空间"></a>
</li>
<li>
<a href="javascript:void(0);" title="人人"></a>
</li>
<li>
<a href="javascript:void(0);" title="腾讯"></a>
</li>
</ul>
</div>
</div>
</div>
</el-form>
// elementUI表单方法：
data() {
return {
form: {
formtitle: "",
formconent: "",
imageUrl: "",
},
};
},
methods: {
handleChange(file) {
if (file) {
this.form.imageUrl = URL.createObjectURL(file.raw);
}
},
beforeupload(file) {
const isImage = file.type.includes("image");
if (!isImage) {
this.$message.error("上传文件类型必须是图片!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
}
return isImage && isLt2M;
},
onSumbit() {
function settime(time = +new Date()) {
var date = new Date(time + 8 * 3600 * 1000);
return date.toJSON().substr(0, 19).replace("T", " ");
}
let formData = {
formtitle: this.form.formtitle,
formconent: this.form.formconent,
createtime: settime()
};
this.$axios.post("/newtravel", formData).then((res) => {
console.log(res);
});
},
},1.2 node 后台代码
// app.js
const express = require('express');
const path = require("path");
const travelnotes_query = require('./query/travelnotes_query');
const app = express();
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
//方便返回json
res.header("Content-Type", "application/json;charset=utf-8");
if (req.method == 'OPTIONS') {
//让options请求快速返回
res.sendStatus(200);
} else {
next();
}
});
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'static')));
// 定义写游记接口
app.post('/newtravel', (req, res, next) => {
let data = req.body
travelnotes_query.addNewTravelData(data, function (rec) {
res.json(rec).end();
});
})
// 定义写游记上传图片接口
var multer = require('multer')
var fs = require('fs')
const upload = multer({ dest: __dirname + '/static/upload' }) // 定义图片文件存储位置
app.post('/newtravel/upload', upload.single('file'), async (req, res) => {
let file = req.file;
let basePath = __dirname + '/static/upload/'; // 设置初始路径
let oldFileName = file.filename // 获取文件名
let newFileName = Date.now() + '.png' // 将文件名设置成时间戳png格式
let filePath = basePath + oldFileName; // 源文件路径
let newFilePath = basePath + newFileName; // 新文件路径
if (fs.existsSync(basePath)) { // 判断该目录是否存在，若存在执行文件重命名操作
fs.rename(filePath, newFilePath, (err) => {
if (err) throw err
})
}
let imgurl = 'static/upload/' + newFileName // 设置文件相对路径用于存入数据库
let data2 = {
imgurl: imgurl
}
travelnotes_query.addNewTravelImage(data2, function (rec) {
res.json(rec).end();
});
})
const port = process.env.PORT || 5000;
app.listen(port, function () { console.log(`监听端口： ${port}`) });
// travelnotes_query.js
const query = require("../dbconn.js");
// 写游记添加数据
exports.addNewTravelData = function (data, callback) {
console.log('获取的数据：', data);
var arr = [];
arr.push(data.formtitle);
arr.push(data.formconent);
arr.push(data.createtime);
query('INSERT INTO `travelnotes` (formtitle,formconent,createtime) VALUES (?,?,?)', arr, function (err, results, fields) {
if (err) throw err;
callback(results);
});
}
// 写游记添加图片
exports.addNewTravelImage = function (data, callback) {
console.log('获取的数据：', data);
var arr = [];
arr.push(data.imgurl);
query('INSERT INTO `travelnotes` (imgurl) VALUES (?)', arr, function (err, results, fields) {
if (err) throw err;
callback(results);
});
}
// dbconn.js
//定义连接池
const mysql = require('mysql2');
const pool = mysql.createPool({
host: '*****',
user: '*****',
password: '*****',
database: '*****',
dateStrings: true,
waitForConnections: true,
connectionLimit: 50,
queueLimit: 0
});
//定义通用的查询接口并将其导出
var query=function(sql,values,callback){
pool.getConnection(function(err,conn){
if(err){
console.log(err);
callback(err,null,null);
}else{
conn.query(sql,values,function(qerr,results,fields){
//释放连接
conn.release();
//事件驱动回调
callback(qerr,results,fields);
});
}
});
};
module.exports=query;
2、方法二（把表单放在图片里，请求1次）
2.1 vue 前台
// vue 的dom内容
<el-form ref="form" class="forms" :model="form">
<div class="title">
<el-input
type="text"
placeholder="请在这里输入标题"
v-model="form.formtitle"
maxlength="48"
show-word-limit
>
</el-input>
</div>
<div class="con">
<div class="toolbar clearfix">
<div class="toolbar-tip"></div>
<ul class="toolbar-group">
<el-upload
ref="upload"
action="http://localhost:5000/newtravel"
:auto-upload="false"
:before-upload="beforeupload"
:on-change="handleChange"
:show-file-list="false"
:data="form"
>
<li>图片</li>
</el-upload>
</ul>
</div>
<div class="inputcon">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
<el-input
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="form.formconent"
>
</el-input>
</div>
<div class="btns">
<div class="user_accept">
<el-checkbox v-model="isaccept"
>我已阅读并同意
<a href="" title="《马蜂窝游记协议》">《马蜂窝游记协议》</a>
</el-checkbox>
</div>
<el-button type="submit" class="btn_submit" @click="onSumbit('form')"
>发表</el-button
>
<span class="cont">或者</span>
<span class="btn_save">保存草稿</span>
<div class="sync">
<span>同步到：</span>
<ul class="clearfix">
<li>
<a href="javascript:void(0);" title="微博"></a>
</li>
<li>
<a href="javascript:void(0);" title="空间"></a>
</li>
<li>
<a href="javascript:void(0);" title="人人"></a>
</li>
<li>
<a href="javascript:void(0);" title="腾讯"></a>
</li>
</ul>
</div>
</div>
</div>
</el-form>
// vue 的data和methods
data() {
return {
form: {
formtitle: "",
formconent: "",
imageUrl: "",
},
uploadFile: [],
};
},
methods: {
handleChange(file) {
if (file) {
this.form.imageUrl = URL.createObjectURL(file.raw);
this.uploadFile.push(file.raw);
}
},
beforeupload(file) {
const isImage = file.type.includes("image");
if (!isImage) {
this.$message.error("上传文件类型必须是图片!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2MB!");
}
return isImage && isLt2M;
},
onSumbit(form) {
let vm = this;
this.$refs[form].validate((valid)=>{
if(valid){
vm.$refs.upload.submit();
}else{
return false
}
})
},
},2.2 node 后台
//app.js
// 定义写游记接口
var multer = require('multer')
var fs = require('fs')
const upload = multer({ dest: __dirname + '/static/upload' })
app.post('/newtravel', upload.single('file'), async (req, res) => {
let file = req.file;
let basePath = __dirname + '/static/upload/';
let oldFileName = file.filename
let newFileName = Date.now() + '.png'
let filePath = basePath + oldFileName;
let newFilePath = basePath + newFileName;
if (fs.existsSync(basePath)) {
fs.rename(filePath, newFilePath, (err) => {
if (err) throw err
})
}
let imgurl = 'static/upload/' + newFileName
function settime(time = +new Date()) {
var date = new Date(time + 8 * 3600 * 1000);
return date.toJSON().substr(0, 19).replace("T", " ");
}
let formdata = {
imgurl: imgurl,
formtitle: req.body.formtitle,
formconent: req.body.formconent,
formtitle: req.body.formtitle,
createtime: settime()
}
travelnotes_query.addNewTravelNote(formdata, function (rec) {
res.json(rec).end();
});
})
//travelnotes_query.js
exports.addNewTravelNote = function (data, callback) {
var arr = [];
arr.push(data.formtitle);
arr.push(data.imgurl);
arr.push(data.formconent);
arr.push(data.createtime);
query('INSERT INTO `travelnotes` (formtitle,imgurl,formconent,createtime) VALUES (?,?,?,?)', arr, function (err, results, fields) {
if (err) throw err;
callback(results);
});
}其他的内容一样
3、效果预览
