vue3使用element-plus上传图片后端

要使用Element-Plus上传图片到后端，你需要使用一个后端框架（如Node.js）来接收和处理上传的文件，并将其保存在服务器上。在Vue3中，你可以使用Element-Plus的Upload组件来实现这一点。以下是一个简单的例子：

<template>
  <el-upload
    action="/upload"
    :on-success="handleSuccess"
    :file-list="fileList"
    list-type="picture">
    <el-button slot="trigger">选择图片</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const fileList = ref([]);
    const handleSuccess = (response) => {
      // 处理上传成功的结果
      console.log(response);
    };
    return {
      fileList,
      handleSuccess
    };
  }
};
</script>

在这个例子中，我们使用了`el-upload`组件来创建一个文件上传的界面。`action`属性指定了上传文件的路径，`on-success`属性指定了上传成功后的回调函数，`file-list`属性指定了要上传的文件列表，`list-type`属性指定了上传的文件类型。

在后端，你需要使用一个接收上传文件的路由。以下是一个使用Express.js框架的示例：

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

// 配置文件上传的路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

// 创建上传对象
const upload = multer({ storage: storage })

// 处理文件上传的路由
app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('文件上传成功');
});

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

在这个例子中，我们使用了`multer`库来处理文件上传。`destination`属性指定了文件上传的路径，`filename`属性指定了上传文件的文件名。`upload`对象创建了一个文件上传的中间件，`upload.single('file')`指定了要上传的文件名。当文件上传成功后，`req.file`对象将包含上传的文件信息，我们可以将其保存到数据库或其他地方。

这就是使用Element-Plus上传图片到后端的简单示例。当然，实际情况可能更加复杂，你需要根据自己的需求来进行调整。