vue 上传图片到本地文件夹

可以使用`axios`和`form-data`来实现文件上传，具体步骤如下：

1. 在`<template>`中添加一个`<input type="file">`元素，用于选择要上传的文件。

<template>
  <div>
    <input type="file" ref="fileInput">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

2. 在`<script>`中引入`axios`和`form-data`。

import axios from 'axios';
import FormData from 'form-data';

3. 实现上传文件的方法`uploadFile`，该方法会通过`axios`发送一个POST请求，将文件上传到服务器。

methods: {
  uploadFile() {
    // 获取文件
    const file = this.$refs.fileInput.files[0];
    if (!file) {
      alert('请选择要上传的文件');
      return;
    }

    // 创建form-data对象，并添加文件
    const formData = new FormData();
    formData.append('file', file);

    // 发送POST请求上传文件
    axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(response => {
      console.log(response.data);
      alert('上传成功');
    })
    .catch(error => {
      console.error(error);
      alert('上传失败');
    });
  }
}

4. 在服务器端处理文件上传。具体实现方式与框架和语言有关，这里提供一个Node.js Express框架的例子。在服务器端，需要安装`multer`模块，用于处理文件上传。

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

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

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('上传成功');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

在上面的例子中，上传的文件被保存在`uploads/`目录下，上传成功后会返回一个字符串`上传成功`。