Elementui+iView将图片上传到express服务器

前段代码

Elementui代码

  
    
        选择图片
    
    
        上传至服务器
    
    

      jpg/png files with a size less than 500kb
    
  

标签中的action属性设置为expres服务器路由的地址，ref设置为upload，on-success为文件上传成功事件，触发事件，执行successUp函数

第二个即为提交按钮，点击执行Onsubmit函数

iView代码

  
    上传图片
  

iView的代码比较简洁，上传图片的按钮点击时，会自动执行submit，不用我们另外设置函数。

iView触发on-success事件所执行的函数与Elementui的一致

上述代码的方法声明

export default {
  methods: {
    Onsubmit() {
      this.$refs.upload.submit();
    },
    successUp(response, file, fileList) {
      console.log("通过127.0.0.1:7882\\" + response.file.path + "查看图片");
    },
  },
};

this.$refs.upload.submit();表示找到ref为upload的组件，执行submit函数，即可将图片上传至服务器

successUp函数有三个参数，response为服务器返回的响应，file为当前的文件对象，fileList为当前文件列表

demo3.png

上图为response返回的数据。path表示图片存在服务器的位置，originalname表示在上传前图片在主机的原始名字

后端代码

const express = require('express');
const router = express.Router();
const multer = require("multer");
const fs = require('fs');
const 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().toString().padStart(2, '0');
      let dir = "./uploads/" + year + month + day;

      //判断目录是否存在，没有则创建
      if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir, {
          recursive: true
        });
      }

      //dir就是上传服务器成功的图片的存放的目录
      cb(null, dir);
    },
    //设置文件名称
    filename: function (req, file, cb) {
      let fileName = Date.now() + path.extname(file.originalname);
      //fileName就是上传文件的文件名
      cb(null, fileName);
    }
  })
});
router.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.json({
    file: req.file
  })
})
module.exports = router;

需要使用到multer模块，没有的需要自行下载npm install multer -s

图片上传至服务器成功，会在src目录下创建一个文件夹uploads，该文件夹下面还会创建子文件夹，名称为图片上传成功时的年月日

res.json与res.send的作用基本一致，只是res.json返回的格式为json

注意

后端设置文件名称时，最好不要用其他字符，以免通过静态访问失败；

后端设置路由时也不要设置其他字符，_下划线也不要设置；

前端配置代理时vue.config.js，自定义的代理名称也最好不要带有其他字符，尽量使用驼峰命名法。

通过express静态访问图片

在app.js文件中写入app.use('/uploads', express.static('uploads'))，即可在浏览器中通过访问127.0.0.1:express的端口/uploads/图片上传年月日/图片名称，查看图片