vue3中实现图片上传到数据库

在Vue3中，可以使用axios或fetch来发送请求将图片上传到后端服务器，然后将上传成功后返回的图片地址保存到数据库中。以下是一个简单的示例代码：

<template>
  <div>
    <input type="file" ref="fileInput" @change="uploadImage">
    <img :src="imageUrl" alt="Uploaded image">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    async uploadImage() {
      const file = this.$refs.fileInput.files[0]
      const formData = new FormData()
      formData.append('image', file)

      try {
        const response = await axios.post('/api/upload-image', formData)
        const imageUrl = response.data.imageUrl
        // 将imageUrl保存到数据库中
        this.imageUrl = imageUrl
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在这个示例中，我们使用了`<input type="file">`元素来让用户选择要上传的图片，然后使用FormData来创建一个包含图片数据的表单，将其作为POST请求的body发送到后端服务器。在上传成功后，服务器会返回一个包含图片地址的JSON响应，我们可以将其保存到Vue组件的data中，随后可以将其保存到数据库中。

需要注意的是，这个示例代码仅供参考，实际使用时需要根据具体的业务需求进行修改。另外，上传图片涉及到文件大小、文件类型、文件名称等方面的限制，需要在前端和后端都进行合适的校验和处理。