vue上传图片到项目目录下

在Vue项目中，将图片上传到项目目录下需要经过以下步骤：

1. 在vue项目中创建一个文件夹用于存放上传的图片，比如可以在public目录下创建一个名为“uploads”的文件夹。

2. 在Vue组件中添加一个input标签，设置type为file，同时添加一个change事件监听器，用于监听用户选择上传的文件。

3. 在change事件监听器中，获取上传的文件对象，然后使用FormData对象创建一个表单，将文件对象作为参数传入表单中。

4. 使用axios或其他HTTP请求库将表单发送到服务器端，服务器端接收到表单数据后，将文件保存到“uploads”文件夹中。

下面是一个示例代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('image', file)

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

在上面的代码中，我们在Vue组件中添加了一个input标签，当用户选择上传的文件后，会触发handleFileUpload方法。在handleFileUpload方法中，我们首先获取用户选择的文件对象，然后使用FormData对象创建一个表单，将文件对象作为参数传入表单中。

接着，我们使用axios库将表单数据发送到服务器端。在发送请求时，需要设置Content-Type为multipart/form-data，以告诉服务器端请求中包含了文件数据。服务器端接收到表单数据后，可以将文件保存到“uploads”文件夹中。