怎么使用node+express+axios實(shí)現(xiàn)單文件上傳功能

這篇文章主要介紹了怎么使用node+express+axios實(shí)現(xiàn)單文件上傳功能的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇怎么使用node+express+axios實(shí)現(xiàn)單文件上傳功能文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

1.安裝依賴

在node服務(wù)端安裝依賴

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({
    //設(shè)置文件存儲(chǔ)位置
     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();
       //直接從根目錄開(kāi)始找
       let dir = "./public/uploads/" + year + month + day;
 
       //判斷目錄是否存在，沒(méi)有則創(chuàng)建
       if (!fs.existsSync(dir)) {
         fs.mkdirSync(dir, {
           recursive: true
         });
       }
 
       //dir就是上傳文件存放的目錄
       cb(null, dir);
     },
     //設(shè)置文件名稱
     filename: function(req, file, cb) {
       let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
       //fileName就是上傳文件的文件名
       cb(null, fileName);
     }
  })
})

    //接口地址為:admin/upload/img   根據(jù)自己的路由配置來(lái)寫(xiě)
 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('文件大小過(guò)大');
            // }

            //限制文件類型
            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;   //我們最后要在服務(wù)器端拿到圖片，要拼接上自己的服務(wù)器的地址
                })
        }
    }
}
</script>

<style>

</style>

關(guān)于“怎么使用node+express+axios實(shí)現(xiàn)單文件上傳功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“怎么使用node+express+axios實(shí)現(xiàn)單文件上傳功能”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。