实现文件上传 - 从服务到前端

本文Demo的完整工程代码, 参考file-upload-server / file-upload-client

服务

express

cnpm i -g express-generator && express -e file-upload-server

cd file-upload-server && cnpm i

npm start

测试

curl localhost:3000

touch routes/upload.js

var express = require('express');
var router = express.Router();

// 上传单个文件
router.post('/single', function (req, res, next) {
    res.send({ ret_code: '0' });
});

module.exports = router;

测试

curl -X POST localhost:3000/upload/single

multer

cnpm i --save multer

mkdir middleware && touch middleware/upload.js

var fs = require('fs');
var multer = require('multer');

// Step 1: 新建upload
var createFolder = function (folder) {
    try {
        fs.accessSync(folder);
    } catch (e) {
        fs.mkdirSync(folder);
    }
};

var uploadFolder = './upload/';

createFolder(uploadFolder);

// Step 2: 配置multer
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder);
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

var upload = multer({ storage: storage });

module.exports = upload;

upload

vim routes/upload.js

var express = require('express');
var router = express.Router();
var upload = require('../middleware/upload');

// 上传单个文件
router.post('/single', upload.single('single'), function (req, res, next) {
    console.log(req.file);
    res.send({ ret_code: '0' });
});

module.exports = router;

echo upload >> .gitignore

vim views/index.ejs

<form action="/upload/single" method="post" enctype="multipart/form-data">
    <h2>上传单个文件</h2>
    <input type="file" name="single">
    <input type="submit" value="提交">
</form>

测试

浏览器打开localhost:3000

前端

vue

 vue init webpack file-upload-client

cd file-upload-client && cnpm i

npm start

Element

cnpm i --save element-ui

vim src/main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import App from './App';
import router from './router';

Vue.use(ElementUI);

Vue.config.productionTip = false;

upload

vim src/components/Hello.vue

<template>
  <el-upload action="http://localhost:3000/upload/single" name="single" :on-success="handleSuccess" :on-error="handleError" list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  name: 'hello',
  methods: {
    handleSuccess() {
      this.$message.success('上传成功');
    },
    handleError(err) {
      this.$message.error(`上传失败: ${err}`);
    },
  },
};
</script>

file-upload-01.png

跨域

cd file-upload-server && cnpm i --save cors

vim app.js

var cors = require('cors');

app.use(cors());

筛选

服务

vim middleware/upload.js

// Step 2: 配置multer
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder);
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

var upload = multer({
    storage: storage,
    limits: { fileSize: 2 * 1000 },
    fileFilter: function (req, file, cb) {
        if (file.mimetype !== 'image/png' && file.mimetype !== 'image/jpeg') {
            return cb(new Error('error'));
        }
        cb(null, true);
    }
});

module.exports = upload;

vim ./routes/upload.js

var singleUpload = upload.single('single');

// 上传单个文件
router.post('/single', function (req, res, next) {
    singleUpload(req, res, function (err) {
        if (err) {
            return res.status(500).send({ message: '只能上传jpg/png文件 且不超过2kb' });
        }
        console.log(req.file);
        res.send({ ret_code: '0' });
    });
});

module.exports = router;

前端

vim src/components/Hello.vue

<template>
  <el-upload action="http://localhost:3000/upload/single" name="single" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件 且不超过2kb</div>
  </el-upload>
</template>

<script>
export default {
  name: 'hello',
  methods: {
    beforeUpload(file) {
      const isImage = (file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt2K = file.size / 1024 < 2;
      if (!isImage) {
        this.$message.error('上传头像图片只能是jpg/png格式!');
      }
      if (!isLt2K) {
        this.$message.error('上传头像图片大小不能超过2kb!');
      }
      return isImage && isLt2K;
    },
    handleSuccess() {
      this.$message.success('上传成功');
    },
    handleError(err) {
      this.$message.error(`上传失败: ${err}`);
    },
  },
};
</script>

实现文件上传 - 从服务到前端

实现文件上传 - 从服务到前端

目录

服务

express

multer

upload

前端

vue

Element

upload

跨域

筛选

服务

前端

待完善

多文件

数据库

静态资源域名

参考

推荐阅读更多精彩内容