后台服务器的搭建

入口文件

//server.js
const express = require('express') 
const app = express() 
const PORT = 4000 
//引入路由   文件上传对应的路由
const upload = require('./upload') 
//x-powered-by显示后台能使用哪种语言编写 app.disabled('x-powered-by'); 
//extended: false：表示使用系统模块querystring来处理，也是官方推荐的
//extended:tru：表示使用第三方模块qs来处理
app.use(express.urlencoded({ extended: true })); 
app.use(upload) app.listen(PORT, (err) => { 
if (!err) { console.log(`服务器启动了，地址为：http://localhost:${PORT}`) } 
})

路由

var express = require('express');
var router = express.Router();
var fs = require('fs');
//引入multer处理文件
var multer  = require('multer');
// 使用硬盘存储模式设置存放接收到的文件的路径以及文件名
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 接收到文件后输出的保存路径（若不存在则需要创建）
        cb(null, 'upload/');    
    },
    //filename用于确定文件夹中的文件名的确定
    filename: function (req, file, cb) {
        // 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg
        cb(null, Date.now() + "-" + file.originalname);  
    }
});
 
// 创建文件夹
var createFolder = function(folder){
    try{
        // 测试 path 指定的文件或目录的用户权限,我们用来检测文件是否存在
        // 如果文件路径不存在将会抛出错误"no such file or directory"
        fs.accessSync(folder); 
    }catch(e){
        // 文件夹不存在，以同步的方式创建文件目录。
        fs.mkdirSync(folder);
    }  
};
 
var uploadFolder = './upload/';
createFolder(uploadFolder);
 
// 创建 multer 对象
var upload = multer({ storage: storage });
 
/* POST upload listing. */
router.post('/post', upload.single('file'), function(req, res, next) {
    var file = req.file;
    console.log('文件类型：%s', file.mimetype);
    console.log('原始文件名：%s', file.originalname);
    console.log('文件大小：%s', file.size);
    console.log('文件保存路径：%s', file.path);
    // 接收文件成功后返回数据给前端
    res.json({res_code: '0'});
});
 
// 导出模块（在 app.js 中引入）
module.exports = router;

express服务器对于后台文件的处理需引入第三方中间件multer

安装multer：npm install --save multer

 

ElementUI( Upload )实现文件上传

Vue-cli@2.0 版本脚手架使用npm i element-ui –S

在main.js文件中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

 

Vue-cli@3.0版本脚手架需使用vue add element   文件会自动引入main.js文件

在*/.vue文件中
<template>
  <div id="app">
    <el-upload
      class="upload-demo"
      action="/api/post"         //  /api是因为配置了服务器代理
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  }
};
</script>
 
<style lang='stylus'></style>