VUE中使用el-upload不立即上传图片，待点击提交后才上传到本地文件夹

一、效果图及其描述

使用auto-upload属性，令图片不立即上传，但确能显示在前端一个缓存预览的效果，待页面刷新后，缓存预览的图片消失。只有点击了“提交”按钮后，图片才会保存到本地文件夹中，不会消失。

二、方法

第一步，先配置接口文件server/router.js,接口为post请求，请求为"localhost:8888/upload"

const fs = require('fs')
const multer = require('multer')
const express = require('express')
const router = express.Router()
 
/** 导入图片
 * POST
 * /upload
 * */
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './upload')
  },
  filename: function (req, file, cb) {
    // 设置保存文件的名称，这里以时间代替原文件名[file.originalname]
    cb(null, Date.now() + '.jpg')
  }
})
 
var createFolder = function (folder) {
  try {
    fs.accessSync(folder)
  } catch (e) {
    fs.mkdirSync(folder)
  }
}
 
var uploadFolder = './upload/'
createFolder(uploadFolder)
var upload = multer({
  storage: storage
})
 
router.post('/upload', upload.single('file'),
  function (req, res, next) {
    var file = req.file
    console.log(file)
    res.send(file)
  })
 
module.exports = router

第二步，搭建服务端口文件server/index.js，用于引用接口文件和使用端口localhost:8888

// 搭建express服务
const express = require('express')
const app = express()

// post请求表单数据
app.use(express.urlencoded({extended: true}))

// 静态文件托管,通过localhost:8888/readupload/文件名.jpg可查看文件
app.use('/readupload', express.static('upload'))

// 路由
const router = require('./router')

app.use('/', router)

app.listen(8888, () => {
  console.log(8888)
})

第三步，配置vue页面,因为auto-upload属性为false时，on-success和before-upload属性会失效，我们将他们的操作移到on-change中来(上传变化的钩子)。