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 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、效果预览