快捷導(dǎo)航

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

更新時(shí)間：2022年08月15日 16:27:18 作者：易de

這篇文章主要為大家詳細(xì)介紹了node+express+axios實(shí)現(xiàn)單文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了node+express+axios實(shí)現(xiàn)單文件上傳的具體代碼，供大家參考，具體內(nè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();
? ? ? ?//直接從根目錄開始找
? ? ? ?let dir = "./public/uploads/" + year + month + day;
?
? ? ? ?//判斷目錄是否存在，沒有則創(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ù)自己的路由配置來寫
?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; ? //我們最后要在服務(wù)器端拿到圖片，要拼接上自己的服務(wù)器的地址
? ? ? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>

<style>

</style>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: