vue3图片上传

你可以通过以下步骤在Vue3中实现图片上传：

1. 在Vue3项目中安装`axios`和`qs`库，用于发送HTTP请求和处理请求参数。

npm install axios qs --save

2. 在Vue3组件中定义一个文件上传方法，可通过`input type="file"`获取用户选择的文件，然后使用`FormData`对象将文件数据和其他表单数据一起发送到服务器。

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload()" />
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  methods: {
    async handleFileUpload() {
      const file = this.$refs.fileInput.files[0]
      const formData = new FormData()
      formData.append('file', file)
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      console.log(response.data)
    }
  }
}
</script>

3. 在服务器端接收请求并保存文件。

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

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.send('File uploaded successfully')
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

以上是一个简单的实现文件上传的示例，你可以根据自己的需求进行修改和扩展。