vue使用elementUI组件提交表单（带图片）到node后台
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 INTOtravelnotes(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 INTOtravelnotes(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 INTOtravelnotes(formtitle,imgurl,formconent,createtime) VALUES (?,?,?,?)', arr, function (err, results, fields) {
if (err) throw err;
callback(results);
});
}
其他的内容一样
3、效果预览
vue使用elementUI组件提交表单（带图片）到node后台的更多相关文章
- java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
- java模拟post方式提交表单实现图片上传【转】
转自:http://blog.csdn.net/5iasp/article/details/8669644 模拟表单html如下: <form action="up_result ...
- vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue 中跨组件的表单验证
使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...
- Vue基础-自定义事件的表单输入组件、自定义组件的 v-model
Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...
- 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单
提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Element-ui中为上传组件添加表单校验
vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...
- vue.js中 ,回车键实现登录或者提交表单!
vue的功能非常强大,但是我们作为一个后端开发人员,前端的东西不一定都弄的很明白,今天就给大家介绍一个回车提交表单的真实案例,达到回车登录的效果! @ keyup.enter 实现的效果 <in ...
- C#的提交表单方式主要有两种WebClient与HttpWebRequest
根据黄聪:C#模拟网站页面POST数据提交表单(转) using System; using System.Collections.Generic; using System.IO; using Sy ...
随机推荐
- 通过cpu热插拔解决rcu stall的问题
在linux 3.10环境一次故障处理中,发现有类似如下打印: NFO: rcu_sched_state detected stalls on CPUs/tasks: {15 } (detected ...
- Codeforces 1503C Travelling Salesman Problem（Dynamic Programming）
题意 大家都是优秀生,这点英文还是看得懂的:点此看题 题解 由于旅行路线成一个环,所以从哪里出发不重要,我们把景点按照 a i a_i ai 排序,不妨就从左边最小的出发.基础的旅行费用 c i c ...
- LOJ#6089 小 Y 的背包计数问题 - DP精题
题面 题解 (本篇文章深度剖析,若想尽快做出题的看官可以参考知名博主某C202044zxy的这篇题解:https://blog.csdn.net/C202044zxy/article/details/ ...
- 【读书笔记】C#高级编程 第二章 核心C#
(一)第一个C#程序 创建一个控制台应用程序,然后输入代码,输入完毕后点击F5 Console.WriteLine();这条语句的意思:把括号内的内容输出到界面上: Console.ReadKey() ...
- nginx中 location正则的理解
文章转载自:https://blog.csdn.net/wzj_110/article/details/110142902 正则表达式在线测试工具:https://tool.lu/regex loca ...
- 四、frp内网穿透服务端frps.ini各配置参数详解
[必须]标识头[common]是不可或缺的部分 [必须]服务器IPbind_addr = 0.0.0.00.0.0.0为服务器全局所有IP可用,假如你的服务器有多个IP则可以这样做,或者填写为指定其中 ...
- Beats：使用Elastic Stack对Nginx Web服务器监控
- 分享一个Vue实现图片水平瀑布流的插件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久以前写的一篇文章<JS两 ...
- C#-11 接口
一 什么是接口 接口是指定一组函数成员而不实现它们的引用类型. class Program { static void FlyFunc(IFly obj) { obj.Fly(); } static ...
- win10 python 环境搭建
1.在官网上下载python安装程序:www.python.org 官网是英文的,程序自己慢慢找就好了.因为机子是64位的,所以必须下载64位的pyhon安装程序,另外我这里下的是python版本是2 ...