element-ui 手动上传图片，后端node+express接收

手动上传图片不需要action，如果需要给事件传参就需要以下的方式，第三个参数后是自己要传的参数
<el-upload
    class="centerImg"
    action=""
    list-type="picture-card"
    :auto-upload="false"
    :on-change="
      (file, fileList) => {
        handleAvatarChangeIcon(file, fileList, 'file');
      }
    "
    :on-exceed="imgExceed"
    :on-remove="handREmove"
    ref="uploadicon"
  >
    <i class="el-icon-plus"></i>
</el-upload>

   // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    handleAvatarChangeIcon(file, fileList, logo) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["jpg", "png", "gif"];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message({
          message: "上传文件只能是 jpg、png、gif格式",
          type: "warning",
        });

        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 2MB",
          type: "warning",
        });
        return false;
      }
     //手动把图片数据保存到data
     this.iconformData = {img:file.raw}
   }   
   
   // 点击上传的按钮
   saveIco() {
          let config = {
            headers: {
              "Content-Type": "multipart/form-data", //设置headers
            }
          };
          // 这个是你要带去后端的数据,可传可不传
          let from = {
            updateFrom: this.updateFrom,
            goodsValue: this.goodsValue,
          }
          const formData = new FormData();
          formData.append("logo", this.iconformData.img);
          formData.append("from", JSON.stringify(from));
          
          //this.$http.post 是封装的请求方式，大家自己发挥
          this.$http
            .post(
              "", //请求后端的url
              formData,
              config
            )
            .then((res) => {
              //上传成功
            })
            .catch((error) => {
              //请求失败
            });
       
    },

后端node接收

let express = require('express');
let router = express.Router();
let path = require("path");
const multer = require('multer');
const fs = require('fs');

//图片上传 需要安装multer   npm i -S multer
let stroage = multer.diskStorage({
//这里是设置图片存放的路径， cd（null,图片的路径）如果存放图片路径的文件夹存在的话就直接传路径就行，如果需要动态创建的话就需要自己先把文件夹创建好才行
// 这里创建文件夹的方式比较老 ，大家自由发挥，只要cd前图片路径存在就行
  destination: async function (req, file, cd) {
  // pat 需要动态创建的文件路径
      let pat = `./public/images`
        if (!fs.existsSync(pat)) {
          let dome = await fs.mkdir(
            path.resolve(pat),
            // 开启多级目录创建
            {recursive: true},
            async (err) => {
              if (err) { return console.error(err); }
              return cd(null, pat)
            }
          );
        } else {
          cd(null, `./public/images`)
        }
    
  },
  filename: function (req, file, cb) {
  // 这里设置的是图片的名字
      cb(null, `${file.originalname}`)
  },
  
})

let upload = multer({
  storage: stroage,
  limits: 1024 * 1024 * 3
});

router.post('/', upload.any(), async (req, res, next) => {
  try {
    //这里拼接好url地址就可以返回给前端了
    // console.log(req.files);
    // console.log(req.file)
    //拼接ulr 地址，本地监听的端口和图片的目录；
    let form = req.files[0]
    let url = ``
     return res.json({
        code: 200,
        message: '上传成功',
        url
      })

    // }
  } catch (error) {
    console.log(error);
  }
})