文件上传vue3和element-plus

要实现文件上传功能，可以使用Vue3的官方插件`@vue/cli-plugin-upload`和Element Plus组件库，下面是具体的步骤。

1. 安装`@vue/cli-plugin-upload`插件

vue add upload

2. 安装Element Plus组件库

npm install element-plus

3. 在Vue项目中引入Element Plus组件库

在`main.js`文件中添加以下代码：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App)
.use(ElementPlus)
.mount('#app')

4. 创建文件上传组件

在Vue3中，可以使用`<input type="file">`元素来实现文件上传功能。创建一个`UploadFile.vue`组件，代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'UploadFile',
  setup() {
    const fileList = ref([])

    const handleSuccess = (response, file, fileList) => {
      console.log(response, file, fileList)
    }

    const beforeUpload = (file) => {
      console.log(file)
      fileList.value.push(file)
      return false // 阻止自动上传
    }

    return {
      fileList,
      handleSuccess,
      beforeUpload
    }
  }
}
</script>

5. 配置后端接口

在`action`属性中指定后端接口地址，该接口需要接收上传的文件并返回上传结果。

6. 使用上传组件

在需要使用文件上传功能的页面中引入`UploadFile`组件，并使用它。例如，在`App.vue`中使用：

<template>
  <div class="app">
    <UploadFile />
  </div>
</template>

<script>
import UploadFile from './components/UploadFile.vue'

export default {
  name: 'App',
  components: {
    UploadFile
  }
}
</script>

<style>
.app {
  margin: 50px;
}
</style>

通过以上步骤，就可以实现文件上传功能了。