vue3+node+mysql实现图片上传，具体怎么实现，分别写前端和后端的例子代码

前端代码（Vue 3）：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadImage() {
      const formData = new FormData();
      formData.append('image', this.selectedFile);

      axios.post('/api/upload', formData)
        .then(response => {
          // 处理上传成功后的逻辑
        })
        .catch(error => {
          // 处理上传失败后的逻辑
        });
    }
  }
};
</script>

后端代码（Node.js + Express + MySQL）：

const express = require('express');
const multer = require('multer');
const mysql = require('mysql');

const app = express();
const upload = multer({ dest: 'uploads/' });

// 创建MySQL连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

// 处理图片上传请求
app.post('/api/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  const sql = 'INSERT INTO images (filename) VALUES (?)';

  connection.query(sql, [file.filename], (error, results) => {
    if (error) {
      console.error(error);
      res.status(500).send('上传图片失败');
    } else {
      res.send('上传图片成功');
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器已启动');
});

注意事项：
1. 前端代码使用`<input type="file">`标签来选择文件，并使用`axios`库发送带有文件的`POST`请求到后端。
2. 后端代码使用`multer`中间件来处理文件上传，并将文件保存到服务器的`uploads/`目录下。
3. 后端代码使用`mysql`库连接MySQL数据库，并将上传成功的图片信息保存到数据库中。请根据实际情况修改数据库配置。
4. 以上代码仅为示例，实际项目中还需添加错误处理、文件类型验证、文件大小限制等相关逻辑。