怎么使用node+express+axios实现单文件上传功能

这篇文章主要介绍了怎么使用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实现单文件上传功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用node+express+axios实现单文件上传功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。