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

目录

服务

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

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

上传单个文件

测试

浏览器打开localhost:3000

前端

vue init webpack file-upload-client

cd file-upload-client && cnpm i

npm start

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

点击上传

export default {

name: 'hello',

methods: {

handleSuccess() {

this.$message.success('上传成功');

},

handleError(err) {

this.$message.error(`上传失败: ${err}`);

},

},

};

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

点击上传

只能上传jpg/png文件 且不超过2kb

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}`);

},

},

};

待完善

多文件

详细参考node-tutorial中的FileUploadClient&FileUploadServer

数据库

静态资源域名

参考