node+express+axios实现单文件上传功能
本文实例为大家分享了node+express+axios实现单文件上传的具体代码，供大家参考，具体内容如下
1.安装依赖
在node服务端安装依赖
cnpm i multer --save
2.后端代码
var express = require('express');
var router = express.Router();
//上传商品图片
var multer = require('multer');
var fs = require('fs');
var path = require('path');
//使用表单上传
var upload = multer({
storage: multer.diskStorage({
//设置文件存储位置
destination: function(req, file, cb) {
let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate();
//直接从根目录开始找
let dir = "./public/uploads/" + year + month + day;
//判断目录是否存在，没有则创建
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, {
recursive: true
});
}
//dir就是上传文件存放的目录
cb(null, dir);
},
//设置文件名称
filename: function(req, file, cb) {
let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
//fileName就是上传文件的文件名
cb(null, fileName);
}
})
})
//接口地址为:admin/upload/img 根据自己的路由配置来写
router.post('/img',upload.single("imgFile") ,function(req,res,next){
console.log(req);
res.json({
file: req.file
})
})
module.exports = router;
3.前端代码
<template>
<div>
<div>
<img :src="url" width="100px">
<!-- input type属性为file,限制上传为文件 -->
<input type="file" @change="uploadImg($event)">
</div>
</div>
</template>
<script>
export default {
data(){
return{
url : ''
}
},
methods:{
uploadImg(e){
let file = e.target.files[0];
// console.log(file);
//限制文件大小
// if(file.size > 10240){
// alert('文件大小过大');
// }
//限制文件类型
if(!file.type.startsWith('image')){
alert('只能上传图片');
return
}
let formData = new FormData();
formData.set('imgFile',file);
this.$axios.post(
'http://127.0.0.1:3000/admin/upload/img',
formData
).then(req => {
// console.log(req.data.file.path);
let path = req.data.file.path; //获取文件路径
// path.indexOf('\\');
let imgUrl = path.substring(path.indexOf('\\'))
// console.log(imgUrl);
// 拿到的图片路径为\uploads\20201119\imgFile-1605779882999.jpg
this.url = 'http://127.0.0.1:3000'+imgUrl; //我们最后要在服务器端拿到图片，要拼接上自己的服务器的地址
})
}
}
}
</script>
<style>
</style>
