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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于node+express+axios实现单文件上传功能的详细内容...