如何用Node.js、Express和Axios实现单文件上传功能？

本文共计621个文字，预计阅读时间需要3分钟。

原文示例为：“本文实例为大家分享了node+express+axios实现单文件上传的具体代码，供大家参考。具体内容如下：

1.安装依赖

在node服务端安装依赖：cnpm i express --save

2.后端代码

var express=require('express');var app=express();// 其他代码...

简化改写后为：“本文以node+express+axios实现单文件上传为例，提供相关代码及参考。内容包括：

1.安装依赖：使用cnpm安装express

2.后端代码：引入express模块并创建应用...

本文实例为大家分享了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(                 '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 = '127.0.0.1:3000'+imgUrl;   //我们最后要在服务器端拿到图片，要拼接上自己的服务器的地址                 })         }     } } </script> <style> </style>

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