node.js使用multer在vue中实现图片上传

效果演示

点击上传选择要上传的图片。

上传成功会加载图片的缩略图。

此时，图片以保存在后端的静态目录中。

设计思路

vue中使用input标签上传图片，绑定@change事件，事件负责把图片发送给后端，后端通过multer模块处理前端传来的图片并返回状态码、信息和后端保存的图片的url。

前端设计

如果Ufile里有内容则显示上传的图片，没有则显示点击上传。

<div class="addImage">
	<input type="file" class="file" id="file" 
	 @change="HandelFile($event)" 
	 accept="image/*">
	 <label for="file" class="filebox" v-if="'' == Ufile">
	    <span>+span>
	    <p>点击上传p>
	 label>
	 <label for="file" class="imgbox" v-if="'' !== Ufile">
	    <img :src="imgUrl" alt="">
	 label>
div>
1
2
3
4
5
6
7
8
9
10
11
12

css

addImage{
   margin: 10px 10px;
   display: inline-block;
    width: 160px;
    height: 125px;
    border: 1px dashed darkgray;
    background: #f8f8f8;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    .file{
      position: absolute;
      top: 0;
      left: 0;
      width: 160px;
      height: 125px;
      opacity: 0;
    }
    .filebox,.imgbox{
      width: 160px;
      height: 125px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      span{
         font-size: 40px;
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

选择完图片后会触发HandelFile()图片上传方法，该方法把选择的图片发送给后端，图片是event.target.files[0]里的内容。把图片文件添加到创建的formdata对象中，将数据编译成键值对，以便用XMLHttpRequest来发送数据。

HandelFile(event){
    this.Ufile = event.target.files[0];
    //创建一个formdata对象
    let formData = new FormData();
    //将文件添加到formdata对象中
    formData.append("ile",this.Ufile);
    axios.post('http://localhost:3000/upload',formData).then(res=>{
       this.imgUrl = res.data.url;
    });
 }
1
2
3
4
5
6
7
8
9
10

后端设计

安装multer模块

npm i multer
1

导入要用到的模块

const express = require("express");
const router = express.Router();
const multer = require("multer");
1
2
3

控制multer文件存储方式，destination是设置文件的保存路径，filename是重命名文件的名称。这里设置保存路径为静态目录public里的upload文件夹，文件名为时间戳+文件原名。

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/upload');
  },
  filename: function (req, file, cb) {
     cb(null,`${Date.now()}-${file.originalname}`);
  }
});
const upload = multer({storage:storage});
1
2
3
4
5
6
7
8
9

方法中的file对象包含有以下信息：

路由主体，前端请求携带过来的信息会经过upload.any()这个方法处理，下面图片是处理后req.file的内容。

router.post('/', upload.any(),(req,res)=>{
   let url = `http://localhost:3000/upload/${req.files[0].filename}`;
   if(!req.files){
      return res.json({
         status:204,
         message:"没有上传文件"
      })
   }else{
      return res.json({
         status:200,
         message:"上传成功",
         url: url
      })
   }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15