vue 将图片上传到服务器

在 Vue 中将图片上传到服务器可以使用以下步骤：

1. 在 Vue 组件中使用 input 标签的 type 属性为 file 的文件选择器，让用户选择要上传的图片。

2. 创建一个 FormData 对象，在其中添加要上传的图片文件。

3. 使用 Axios 或其他 HTTP 库将 FormData 对象发送到服务器。

4. 在服务器端接收上传的图片文件，并将其存储到指定的文件夹中。

下面是一个示例代码：

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      image: null
    }
  },
  methods: {
    onFileChange(event) {
      this.image = event.target.files[0]
    },
    uploadImage() {
      const formData = new FormData()
      formData.append('image', this.image)
      axios.post('/api/upload-image', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

在上面的代码中，我们首先创建了一个 input 标签的文件选择器，当用户选择文件时，会触发 onFileChange 方法，将选择的文件保存在 data 中的 image 变量中。接下来，当用户点击上传图片按钮时，会触发 uploadImage 方法，该方法将 image 变量添加到 FormData 对象中，并使用 Axios 发送 POST 请求到服务器的 /api/upload-image 路由。在服务器端，我们可以使用 Express 框架的 multer 中间件来接收上传的图片文件。