vue+express图片上传

前端部分

upload.vue

<template>
  <div class="classify">
    <h1>首页</h1>
    <!-- <p><input type="file" @change="upload" ref="file" /></p> -->
    <p><input type="file" ref="file" /></p>
    <p><button @click="upload">上传图片</button></p>
    <p>图片回显：</p>
    <img v-if="img" :src="img" alt="" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      img: "",
    };
  },
  methods: {
    upload() {
      // 新建表单数据对象，用来存储上传的文件及上传的其它数据
      let param = new FormData();
      //获取图片信息
      let file = this.$refs.file.files[0];
      console.log(file);
      //"file"为前后端约定好的属性名
      param.append("file", file);
      axios
        .post("http://localhost:5000/upload", param, {
          headers: {
            // 默认提交的类型
            // "content-type": "application/json"
            // 复杂的表单数据(只要上传文件，就必须是下面的类型)
            "content-type": "multipart/form-data",
          },
        })
        .then((res) => {
          let { url } = res.data;
          this.img = url;
        });
    },
  },
};
</script>

<style>
</style>

Express后端部分

使用multer实现图片上传

• 下载

npm i multer  // nodejs用于上传文件的模块
npm i uuid //uuid用来生成唯一标识符

• 在项目根目录创建static文件夹，并创建uploadImg子文件夹

• 配置 utils/upload.js

const multer = require("multer")  // nodejs用于上传文件的模块
const uuid = require("uuid")  //uuid用来生成唯一标识符

/*
  multer是node的中间件, 处理表单数据 主要用于上传文件  multipart/form-data
*/

// 指定存储位置
const storage = multer.diskStorage({
    // 存储位置
    destination(req, file, callback) {
        // 参数一 错误信息   参数二  上传路径（此处指定upload文件夹）
        callback(null, "static/uploadImg")
    },
    // 确定文件名
    filename(req, file, cb) {
        //文件扩展名
        let extName = file.originalname.slice(file.originalname.lastIndexOf('.'))
        //新文件名
        let fileName = uuid.v1()
        cb(null, fileName + extName)
    }
})
// 得到multer对象  传入storage对象
const upload = multer({ storage })
module.exports = upload;

• 在路由中使用

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