vue 上传图片到本地文件夹

在 Vue 中上传图片到本地文件夹的方法有很多种，以下是其中一种简单的方法：

1. 在 HTML 中添加一个 input 标签，并设置 type="file" 和 @change="handleFileUpload"：

<input type="file" ref="fileInput" @change="handleFileUpload">

2. 在 Vue 的 methods 中添加 handleFileUpload 方法，用于处理上传的文件：

methods: {
  handleFileUpload() {
    const file = this.$refs.fileInput.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.imageDataUrl = reader.result;
      this.uploadImage();
    };
  },
  uploadImage() {
    const formData = new FormData();
    formData.append('file', this.$refs.fileInput.files[0]);
    axios.post('/api/upload', formData)
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }
}

3. 在 uploadImage 方法中使用 axios 发送 POST 请求将文件上传到服务器：

axios.post('/api/upload', formData)

注意：在使用 axios 上传文件时，需要将请求头 Content-Type 设置为 multipart/form-data，可以通过设置 axios 的 headers 实现：

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

4. 在服务器端接收文件并保存到本地文件夹中，具体实现方式可以根据后端语言和框架来选择，以下是一个 Node.js 的例子：

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

const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    const fileExt = path.extname(file.originalname);
    const fileName = file.originalname.replace(fileExt, '').toLowerCase().split(' ').join('-') + '-' + Date.now();
    cb(null, fileName + fileExt)
  }
});

const upload = multer({
  storage: storage
});

app.post('/api/upload', upload.single('file'), (req, res) => {
  if(req.file) {
    res.json({ imageUrl: `http://localhost:3000/${req.file.path}` });
  }
  else {
    res.status(400).json({ message: 'No file uploaded.' });
  }
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的例子中，使用了 multer 中间件来处理文件上传，将上传的文件保存到 uploads 文件夹中，并返回文件的访问地址。