vue上传图片到指定文件夹

你可以使用 FormData 对象来上传图片到指定文件夹。首先，在 HTML 文件中添加一个文件输入框，如下所示：

<form>
  <input type="file" ref="fileInput" />
</form>

然后，在 Vue 组件中，你可以使用 ref 获取文件输入框的引用，并调用它的 files 属性来获取文件列表。接着，你可以使用 FormData 对象来存储文件和其他数据，并使用 axios 库发送 HTTP 请求将文件上传到服务器。

以下是一个示例代码：

<template>
  <form @submit.prevent="upload">
    <input type="file" ref="fileInput" />
    <button type="submit">上传</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async upload() {
      // 获取文件列表
      const fileList = this.$refs.fileInput.files;
      // 创建 FormData 对象
      const formData = new FormData();
      // 将文件添加到 FormData 对象中
      formData.append('file', fileList[0]);
      // 发送请求
      const { data } = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log(data);
    }
  }
}
</script>

在服务器端，你可以使用类似于 multer 这样的中间件来解析文件并将其存储到指定的文件夹中。