vue上传图片

1. 前端代码

 <el-form-item label="图片">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/upload"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

data(){
return{
  headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
}
}
 methods: {
 handleAvatarSuccess(res, file) {
      // 回显：虚拟的存储路径地址
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.imgurl = file.response.url;
      console.log(this.form.imgurl);
    }, // 图片格式和图片大小的验证
    beforeAvatarUpload(file) {
      // console.log(file);
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
}

2. 后端代码

let express = require('express');
let uploadRouter = express.Router();
let upload = require("../utils/upload");

// 图片上传的路由
uploadRouter.post("/upload", upload.single("file"), (req, res) => {
    // 需要返回图片的访问地址    域名+文件名
    const url = "http://localhost:5000/uploadsImg/" + req.file.filename
    // console.log(req.file.filename);
    res.json({ url:url })
})
// 导出
module.exports = uploadRouter;