axios-nodejs 上传图片至服务器并返回图片的url

需求

vue2项目中, 在md预览的一个插件中,需要实现一个功能, 上传图片并实时显示, 这就需要将图片上传到服务器,并且拿到图片的url地址

步骤

nodejs中

app.js中

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

在路由模块upload.js中

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

// 创建 Multer 中间件，用于处理文件上传
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/uploads');
  },
  filename: (req, file, cb) => {
    const extension = file.originalname.split('.').pop();
    cb(null, `${Date.now()}.${extension}`);
  }
});

const upload = multer({ storage: storage });

// 处理文件上传请求，保存文件并返回图片 URL
app.post('/upload', upload.single('file'), (req, res) => {
  const imageUrl = `/uploads/${req.file.filename}`;
  //返回: http://xxx.xxx.jpg
  res.json({ imageUrl });
});

vue中

handleUploadImage(event, insertImage, files){
      const formdata = new FormData();
      formdata.append("file", files[0]); // file是文件
      // 然后得到上传之后的url地址
      upload(formdata).then((v)=>{
      //执行回调,将url插入页面
        insertImage({
          url:v.imageUrl,
          desc: '',
          width: 'auto',
          height: 'auto',
        });
      })

axios中

export const upload=(file)=>{
	return request({
		url:'/upload',
		method:'post',
		data:file,
		headers: {
			"Content-Type": "multipart/form-data"
			//不加服务器读不到文件
		}
	});
}