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

效果演示

点击添加图片选择要上传的图片，然后点击上传按钮。

点击上传后会弹出上传的结果。

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

设计思路

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

前端设计

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

<div class ="addImageBox">
    <div class="addImage">
       <input type="file" class="file" id="file" 
       @change="addImage" 
       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>
    <button class="submitImg" @click="HandelFile">上传</button>
    <p class="upResult">{{upResult}}</p>
 </div>

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;
      }
    }
    .submitImg{
   		width: 160px;
	}
	.upResult{
	   margin-top: 10px;
	}
}

点击添加图片，选择图片后会触发addImage()方法，该方法负责拿到图片的File对象，再将这个对象交给URL.createObjectURL()方法来处理得到图片的URL。

	function addImage(event){
	   Ufile.value = event.target.files[0];
	   console.log(Ufile.value);
	   imgUrl.value = URL.createObjectURL(Ufile.value);
	}

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

	function HandelFile(){
		let formData = new FormData();
		 //将文件添加到formdata对象中
		 formData.append("file",Ufile.value);
		 axios.post('http://localhost:3000/upload',formData).then(res=>{
		    imgUrl.value = res.data.url;
		    upResult.value = res.data.message;
		 });
	}

后端设计

安装multer模块

npm i multer

导入要用到的模块

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

控制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});

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

key	描述
fieldname	multer帮你生成的文件名
originalname	文件原名
encoding	文件的编码类型
mimetype	文件的 Mime 类型
size	文件大小（以字节为单位）

路由主体，前端请求携带过来的信息会经过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
      })
   }
})