vue2前端是上传图片到后端

在 Vue2 前端中上传图片到后端，一般可以使用以下步骤：

1. 创建一个表单，包含一个类型为 `file` 的输入框，用于选择要上传的图片文件。

2. 在 Vue 组件中，监听文件选择事件，获取选中的文件。

3. 使用 `FormData` 对象创建一个表单数据对象，将选中的文件添加进去。

4. 发送 `POST` 请求到后端，携带表单数据对象作为请求体。

5. 在后端中，使用框架提供的文件上传功能，将文件保存到服务器指定的目录中。

以下是一个简单的示例代码：

前端部分（Vue 组件）：

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

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleFileSelect(event) {
      this.selectedFile = event.target.files[0];
    },
    upload() {
      const formData = new FormData();
      formData.append("image", this.selectedFile);
      axios.post("/api/upload", formData).then(response => {
        // 处理上传成功后的响应
      });
    }
  }
};
</script>

后端部分（使用 Express 框架）：

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

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

app.post("/api/upload", upload.single("image"), (req, res) => {
  // req.file 包含上传的文件信息
  res.send("上传成功！");
});

app.listen(3000, () => {
  console.log("服务器启动成功！");
});

在上面的示例代码中，我们使用了 Axios 库发送了一个 POST 请求到 `/api/upload` 接口，请求体中包含了一个名为 `image` 的文件参数，后端使用 Multer 中间件将文件保存到了 `uploads/` 目录下。你可以根据自己的需求来修改这个示例代码。