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>